border-width (CSS property)
| IE5.5+ | FF1+ | Saf1.3+ | Op9.2+ |
|---|---|---|---|
| Buggy | Full | Full | Full |
| Inherited | Initial | Version |
|---|---|---|
| No | medium |
CSS1 |
Example
This style rule assigns a 2px border to
the top and bottom sides, and a four-pixel border to the left- and
right-hand sides, of paragraphs within the element with ID
"example":
#example p {
border-width: 2px 4px;
border-style: solid;
}Description
The shorthand property
border-width sets the width of the border on all four
sides of an element using the values specified. Each border can have its
own value.
The shorthand
border-width allows all four sides of an element’s
borders to be set using either one, two, three, or four specified values.
Refer to the mnemonic (TRouBLe) in Shorthand Properties
for an easy way to remember the shorthand order.
Value
The property takes a CSS length (px, pt, em, and so on) or one of the allowed keywords; percentage values are not allowed.
Negative length values are illegal.
Note that
a border will only be visible as long as a border-style
has been set. The default for border-style is
none, which means that no border will display, and
the border-width will be reset to zero.
The keyword width values of thin, medium, and thick aren’t explicitly defined—their display will depend on the user agent—but have the following meaning: thin <= medium <= thick.
As an example, Internet
Explorer versions (up to and including 7) size thin,
medium, and thick borders at
2px, 4px, and
6px respectively, while Firefox 2.0 sizes them at
1px, 3px, and
5px.
Compatibility
| IE | 5.5 | Buggy |
|---|---|---|
| 6.0 | Buggy | |
| 7.0 | Buggy | |
| Firefox | 1.0 | Full |
| 1.5 | Full | |
| 2.0 | Full | |
| Safari | 1.3 | Full |
| 2.0 | Full | |
| 3.0 | Full | |
| Opera | 9.2 | Full |
| 9.5 | Full |
User agents are supposed to place borders on the
element’s background, but in Internet Explorer for Windows versions up to
and including 7, the background only reaches the inside edge of the border
when the element has a layout. This
means that for dotted or dashed
borders, the background won’t be visible through the spaces within the
border. When the element doesn’t have a layout, the background will extend
under the borders.
When dotted borders are
specified as the border-style, and the border’s width
is only 1px, Internet Explorer for Windows versions
up to and including 6 will display the borders as
dashed instead of dotted. At a
width of 2px and above, the dotted borders will
display correctly. This glitch was fixed in Internet Explorer Version 7
for cases when all four sides are set to 1px.
However, if one of the sides is set to 2px or more,
the 1px dotted borders revert to
dashed in IE7.
Internet Explorer for Windows versions up to and
including 7 don’t support the value inherit.
User-contributed notes
There are no comments yet.
Add a note
To post a note on this topic, please log in with your SitePoint username and password. If you don't have an account yet, you can create a new account for free.
