border-top-color (CSS property)

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


border-top-color: { color | transparent | inherit } ;


The property border-top-color sets the color for the top border of an element.

Borders are placed on top of the element’s background.


This style rule assigns a black color to the top border of paragraphs within the element with ID "example":

#example p {
  border-top-color: #000;
  border-top-style: solid;


This property takes any valid CSS color value or color keyword. The initial value for this property is the value of the color property for the element.

The value transparent allows the border to be transparent, but it will still occupy the space set by the border-width property and allow the background of the element to show through the transparent border.

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.


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 Full

Internet Explorer for Windows versions up to and including 6 do not support transparent borders.

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.

The appearance of the borders may vary between user agents (within limits). The algorithms that define the relationship between the colors used to achieve an effect (for example, groove, ridge, inset, and outset) are not explicitly defined in the CSS specifications, so the colors may vary between user agents. In CSS2.1, the three-dimensional border styles (groove, ridge, inset, and outset) depend on the corresponding border-color, rather than on color.

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

In Internet Explorer for Windows version 8 an element with a color defined does not inherit the border-color of its ancestor when using border-color inherit. (For test case see James Hopkins.)

User-contributed notes

There are no comments yet.

Related Products