CSS Property - Border Width

Value: [thin | medium | thick | <length>]{1,4}
Initial: not defined for shorthand properties
Applies to: all elements
Inherited: no
Percentage values: N/A

This CSS property is a shorthand property for setting all of the border widths in the same place in the style sheet or directly in the HTML tag, as an inline style.

This property is used to declare all of the following border elements:

  • border-width-top
  • border-width-right
  • border-width-bottom
  • border-width-left

There can be from one to four values, with the following interpretation:

  • one value: all four border widths are set to that value
  • two values: top and bottom border widths are set to the first value, right and left are set to the second
  • three values: top is set to the first, right and left are set to the second, bottom is set to the third
  • four values: top, right, bottom and left, respectively

In the examples below, the "=" indicates the resulting widths of the top, right, bottom and left borders:

Example:

p{border-width: thin;} = thin thin thin thin

This is the result

p{border-width: thin thick;} = thin thick thin thick

This is the result

p{border-width: thin thick medium;} = thin thick medium thick

This is the result

p{border-width: thin thick medium thin;} = thin thick medium thin

This is the result

Border widths can be both "fixed" and "relative" in size. The following examples show how this can be achieved.

Example:

All borders have a fixed width (long):
p{border-width: 2px 2px 2px 2px;}

All borders have a fixed width (short):
p{border-width: 2px;}

This is the result

All borders have a relative width (long):
p{border-width: 2em 2em 2em 2em;}

All borders have a relative width (short):
p{border-width: 2em;}

This is the result

Border widths cannot be negative.