border-top-width (CSS property)

Spec
Inherited Initial Version
No medium CSS1
Browser support (more…)
IE5.5+ FF1+ SA1.3+ OP9.2+ CH2+
Buggy Full Full Full Buggy

Syntax

border-top-width: { thin | medium | thick | length | inherit } ;

Description

The property border-top-width sets the width of the border to the top side of an element using the values specified.

Example

This style rule assigns a 2px border width to the top of paragraphs within the element with ID "example":

#example p {
  border-top-width: 2px;
  border-top-style: solid;
}

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. Internet Explorer version 8 now falls in line with other modern browsers and renders the border thickness at 1px, 3px, and 5px respectively.

Compatibility

Internet Explorer Firefox Safari Opera Chrome
5.5 6.0 7.0 8.0 1.0 1.5 2.0 3.0 3.5 1.3 2.0 3.1 4.0 9.2 9.5 10.0 2.0
Buggy Buggy Buggy Buggy Full Full Full Full Full Full Full Full Full Full Full Full Buggy

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 Windows version 8 still has problems with 1px dashed borders and will initially display the area between the borders as white instead of transparent. The borders revert to transparent after other page elements receive focus (such as tabbing to links in the page).

Internet Explorer for Windows versions up to and including 7 don’t support the value inherit.

In Chrome Versions 2 & 3 border-left and border-right dotted borders with a value of 1px do not display uniformly and merge in places to form a solid line.

User-contributed notes

Related Products