CSS border-width, border-top-width, border-right-width, border-bottom-width and border-left-width properties.
Possible Values
- Keyword:
- thin - a thin border.
- medium - a medium border.
- thick - a thick border.
- A length value:
- em - relative unit - the width of the 'font-size' of the font in use.
- ex - relative unit - the height of the letter 'x' in the current font.
- in - absolute unit - inches.
- mm - absolute unit - millimeters.
- cm - absolute unit - centimeters.
- pt - absolute unit - points - a point is 1/72nd of an inch.
- pc - absolute unit - picas - one pica = 12 pt.
- px - absolute unit - pixel - one pixel = 0.75 pt.
- inherit - the value is inherited from the parent element.
The border-width properties define the width of the borders of a box. The
border-width property sets all four borders in one declaration whilst the other four deal with their respective sides.
The width can be given in three ways, either with the words thin, medium or
thick which give you a relative value dependant on the browser, by using a length value or with inherit.
When border-width is used it can have from one to four values.
- When one value is given all four borders have the same width.
- When two values are given the top and bottom borders are given the first value and the right and left borders share the second value.
- When three values are set the top is given the first value, the left and right borders share the second and the bottom is set to the third.
- With four values the border widths are set in the following order: top, right, bottom and left.
Example code to set the four border widths:
border-width:10px; 3em; 2cm; 12pt; border-style: solid;
border-color: red olive;
Border Illustration