The border property is used to set the style, color, and width of an element's border. It can be specified in a shorthand format or individually for each side (top, right, bottom, left). The three components of the border property are:
-
Width (
border-width): Specifies the thickness of the border. -
Style (
border-style): Specifies the style of the border, such as solid, dashed, dotted, etc. -
Color (
border-color): Specifies the color of the border.
When using the shorthand border property, the order of these components is typically width, style, and then color. For example, border: 2px solid #000000; sets a border with a thickness of 2 pixels, a solid style, and a black color.
Alternatively, you can set these components individually for each side using properties like border-top, border-right, border-bottom, and border-left. Each of these properties can have its own width, style, and color values.