border-width

This property is a shorthand that sets the width of the borders of an element.

Syntax

border-width is a shorthand that sets the border-top-width, border-right-width, border-bottom-width and border-left-width properties.
Anywhere from one to four values can be used with this shorthand. Each value sets the top, right, bottom and left values respectively. If the third and/or fourth value aren’t specified, they take the values from the first and second values respectively. If only one value is used, it is applied to all four sides.
Other than using the thin, medium and thick keyword values, any type of length value can be used.

/* Specifying all borders to be thick: */
border-width: thick;

/* Specifying the top and bottom borders to be thin,
while the left and right borders will have the width of 6px: */
border-width: thin 6px;

/* Specifying only 3 values:
top border 3px, right border 6px, bottom border 9px, 
left border will be 6px, same as the right border: */
border-width: 3px 6px 9px;

/* Specifying all four values: 
top border 0.25em, right border 0.5em, bottom border 0.75em, left border 1em: */
border-width: 0.25em 0.5em 0.75em 1em;

Values

length
Any length unit can be used.

medium
Sets the borders to be of medium thickness. This is the default value.

thin
Sets the borders to be thin.

thick
Sets the borders to be thick.

initial
Global CSS keyword – this sets the property to the default value.

inherit
Global CSS keyword – this sets the property to be inherited from its parent element.

Browser Compatibilty

Demos

Have a code example of border-width? Submit a codepen.io demo and we'll showcase it here ↴