border-color
The border-color property defines the color of the borders of an element. It accepts one to four values.
An element must have a border to apply border-color property.
Syntax
border-color: color | transparent;
One value:
border-color: red;
This value applies to all four borders.
Two values:
border-color: red blue;
The first value, red applies to the top and bottom borders, and the second value, blue applies to the left and right borders of an element.
Three values:
border-color: red blue green;
The first value, red applies to the top border, the second value, blue applies to the left and right borders, and the third value, green applies to the bottom border.
Four values:
border-color: red blue green transparent;
The first value, red applies to the top border, the second value, blue applies to the right border, the third value, green applies to the bottom border and the fourth value, transparent applies to the left border.
Example
.mydiv{
border-color: red;
border-style: solid;
}
.div2{
border-color: #fff blue red;
border-style: solid;
}
Property Values
color: sets the color of a given value to the border.
transparent: sets the transparent color to the border. (default value)