A shorthand property for setting the border width, style, and color.
The border shorthand property sets the width, style, and color of an element's border on all four sides in a single declaration. It combines border-width, border-style, and border-color.
The border-style is the only required value; without it, the border will not appear. The values can appear in any order. If a value is omitted, the default is used (medium width, currentColor for color).
For more granular control, you can use border-top, border-right, border-bottom, and border-left to style individual sides, or border-width, border-style, and border-color to set each aspect for all sides.
| Name | Description | Optional |
|---|---|---|
width |
The width of the border (e.g., 1px, thin, medium, thick). | Yes |
style |
The style of the border (none, solid, dashed, dotted, double, groove, ridge, inset, outset). | No |
color |
The color of the border (e.g., black, #000, rgb(0, 0, 0)). | Yes |
.element {
border: 2px solid #333;
}