border-left-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
width to the left of paragraphs within the element with ID
"example":
#example p {
border-left-width: 2px;
border-left-style: solid;
}Description
The property
border-left-width sets the width of the border on the
left-hand side of an element using the values specified.
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.
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.
