CSS border-colorProperty
Example
Set the four border colors:
p
{
border-style:solid;
border-color:#ff0000 #0000ff;
}
{
border-style:solid;
border-color:#ff0000 #0000ff;
}
Try it Yourself »
Property definition and usage instructions
The border-color property sets the color of an element's four borders. This property can have one to four values.
Example:
border-color: red, green, blue, pink;
- Top border is red
- Right border is green
- Bottom border is blue
- Left border is pink
border-color: red, green, blue;
- Top border is red
- The left and right borders are green.
- Bottom border is blue
border-color: red, green;
- Top and bottom borders are red
- Left and right borders are green
border-color: red;
- All four borders are red.
Note:Always declare the border-style property before the border-color property. An element must have borders before you change their color.
| Default Value: | not specified |
|---|---|
| Inherited: | no |
| version: | CSS1 |
| JavaScript Syntax: | object object.style.borderColor="#FF0000 blue" |
Browser Support
The numbers in the table specify the first browser version that fully supports the property.
| Property | |||||
|---|---|---|---|---|---|
| border-color | 1.0 | 4.0 | 1.0 | 1.0 | 3.5 |
Property value
| Value | Description |
|---|---|
| color | Specify the background color. InCSS Color ValuesFind the complete list of color values. |
| transparent | Specifies that the border color should be transparent. This is default. |
| inherit | Specifies that the border color should be inherited from the parent element. |
Related Articles
CSS Tutorial:CSS Border
other extensions