| Inherited | Initial | Version |
|---|---|---|
| No | CSS1, 2.1 |
| IE5.5+ | FF1+ | SA1.3+ | OP9.2+ |
|---|---|---|---|
| Buggy | Full | Full | Full |
Syntax
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 | |||||||
|---|---|---|---|---|---|---|---|---|---|---|
| 5.5 | 6.0 | 7.0 | 1.0 | 1.5 | 2.0 | 1.3 | 2.0 | 3.0 | 9.2 | 9.5 |
| Buggy | Buggy | Buggy | 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.
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.