border-color (CSS property)

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

Syntax

border-color: { { color | transparent }  1 to 4 values | inherit } ;

Description

The shorthand property border-color sets the border color on all four sides of an element using from one to four of the values specified. Each border can have its own value—refer to the mnemonic (TRouBLe) in Shorthand Properties for an easy way to remember the shorthand order.

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

If no color value is specified for border-color, the border will use the color value of the element.

Example

This style rule assigns a red border to the top, a green border to the bottom, and blue borders to the left- and right-hand sides of paragraphs within the element with ID "example":

#example p {
  border-color: red blue green;
  border-style: solid;
}

Value

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.

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 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 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 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