| Inherited | Initial | Version |
|---|---|---|
| No | CSS1, 2.1 |
| IE5.5+ | FF1+ | SA1.3+ | OP9.2+ | CH2+ |
|---|---|---|---|---|
| Buggy | Full | Full | Full | Full |
Syntax
Description
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.
Example
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;
}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 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.
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.
