CSS:border-color
From MDC
[edit] Summary
The border-color property is a shorthand property for setting the color of the four sides of an element's border.
- Initial value: the element's
colorproperty - Applies to: all elements
- Inherited: no
- Percentages: N/A
- Media:
visual - Computed value: the computed value of
colorby default, or as specified.
[edit] Syntax
border-color: [ <color> || transparent ]{1,4} | inherit
[edit] Values
- <color>
- The color can be specified as a hexidecimal RGB value, a regular RGB value, or by using one of the pre-defined color keywords.
- transparent
- The border is not drawn but it still takes up space on the page.
Up to four values can be given;
If one color value is given then all four borders are that color.
If two values, the top and bottom border use the first value, the left and right use the second.
If three values, first for the top, second for left and right, third for bottom.
If four values, first for top, second for right, third for bottom, and fourth for left.
[edit] Examples
element {
border-width: 1px;
border-style: solid;
border-color: black;
}
[edit] Notes
In order to see the border you must also set the border-width to a positive value and the border-style to something visible.
[edit] Specifications
[edit] Browser compatibility
| Browser | Lowest Version |
|---|---|
| Internet Explorer | 4 |
| Firefox | 1 |
| Netscape | 4 |
| Opera | 3.5 |
[edit] Mozilla extensions
The following Mozilla Extensions set the respective border sides to multiple colors for Gecko based browsers.