CSS Border
The CSS border
property is used to set the border around an HTML element. The border property can be used with several values such as border-width, border-style, and border-color. Here are some common CSS border properties:
border-style
: sets the style of the border (solid, dashed, dotted, double, groove, ridge, inset, outset, none)border-width
: sets the width of the borderborder-color
: sets the color of the borderborder-radius
: sets the rounding of the corners of the border
Here is an example of using the border
shorthand property to set a border with a solid style, 1px width, and red color:
div {
border: 1px solid red;
}
In this example, the border
property is used to set a border with a 1 pixel width, a solid style, and a red color.
You can also use the individual border properties to set the border around an element. Here’s an example:
div {
border-width: 2px;
border-style: dotted;
border-color: blue;
border-radius: 10px;
}
In this example, the border-width
, border-style
, and border-color
properties are used to set a border with a 2 pixel width, a dotted style, and a blue color. The border-radius
property is used to round the corners of the border.
By using CSS border properties, you can add visual interest and definition to your HTML elements, making them stand out and enhancing the overall design of your web page.