CSS 2.1 Reference: border-width Property

The border-width property is used as a shorthand method to specify all 4 border widths in one place. See the Box Model for a description of the boxes that are generated for elements and the relative position of the borders.

• The Individual border sides are specified as follows:
  • If 1 width is specified - All 4 borders are set to this width.
  • If 2 widths are specified - 1st width = top and bottom borders, 2nd width = left and right borders.
  • If 3 widths are specified - 1st width = top border, 2nd width = left and right borders, 3rd width = bottom border.
  • If 4 widths are specified - 1st width = top border, 2nd width = right border, 3rd width = bottom border, and 4th width = left border.

CSS Example: Four different border-width properties are set by specifying one, two, three, and four width values respectively.

#sample1 {border: thin solid red;
          border-width: 3px;
}
#sample2 {border: thin solid red;
          border-width: thick 1px;
}
#sample3 {border: thin solid red;
          border-width: 1px medium 0.5em;
}
#sample4 {border: thin solid red;
          border-width: 5px 10px 15px 20px;
}

• thin
• medium
• thick
• inherit - A single inherit keyword is used to specify that the values for this property should be taken from the parent element. If inherit is used with the root element, then the initial values for this property will be used. When the inherit keyword is used, no other property values are allowed.