HTML and CSS Reference
In-Depth Information
The
border-width
property can also be used to specify all four borders individually in the
standard top, right, bottom, left style:
margin
1
border-top-width
padding
2
4
Content
3
border-bottom-width
A single value copies the width to all border sides. With two values, the first sets the
border width of the top and bottom borders, and the second sets the width of the right and
left borders. With three values, the first sets the width of the top border, the second sets the
width of the right and left borders, and the third sets the width of the bottom border. With
four values, each border is set individually in the order top, right, bottom, and left.
Examples
div {border-width: medium;}
/* all sides set medium */
#d1 {border-width: 10px 5px;}
/* 10px top-bottom, 5px right and left */
#fun {border-width: 10px 1px 4px 50px;}
/* sides set individually */
Compatibility
CSS 1, 2, 3 IE 4, 5 (buggy), 5.5+ Netscape 4 (buggy), 6+, Firefox 1+ Opera 5+, Safari 1+
Note
• All borders are set at once, but individual width values can be set with the
shorthand
border-top
,
border-right
,
border-bottom
, and
border-left
, as
well as with the specific properties
border-top-width
,
border-right-width
,
and so on.
