CSS border property

The border CSS property is used to set the width, style and color of the four borders of an element. It sets the same values for the properties of the four borders. To style each border individually, use properties like border-bottom or the more specific border-bottom-width, for example.

border: width style color
border: 1px solid #d66920;
border: 5px solid rgba(0,0,0,0.4);    /* semi-transparent */

width, style and color are optional. However, style is required in practice since it defaults to none. The default width is medium, which is browser-dependent and the default color is the color of text.

Browser Support: Full


Use border to set width, color and style in one go.

.example {
margin: 30px; padding: 30px; border: 5px solid #d66920;

The border property does not allow different looks for each border.

Pixels are the most common unit for border width. Consider using box-sizing set to border-box to include the border as part of the width of the element.

The border Longhands

CSS has plenty of border longhands which means there are usually several ways to set a border:

  • border sets a width, color and style for the four borders.
  • border-EDGE (eg. border-bottom) set the width, color and style for the corresponding border.
  • border-width, border-style and border-color take up to four values. They allow styling each border differently, unlike the border property.
  • border-EDGE-width, border-EDGE-style and border-EDGE-color (eg. border-top-color) set a specific property of a given border.

The Border Styles

The following are the border styles available in CSS. dotted, dashed, solid and double use the exact color set by border-color or one of its longhands. groove, ridge, inset and outset use two colors of the same hue, one darker and one lighter than border-color, to achieve a 3D effect.


Useful Resources

Leave a Reply

Allowed tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>