The border-color property
The border-color property sets a border
color for all sides simultaneously or separately
for each side. The value of the property is any
color units. Default
value: same color as block text.
The property is a shorthand property for the
following properties:
border-left-color,
border-right-color,
border-top-color,
border-bottom-color.
Syntax
selector {
border-color: color;
}
Number of values
The property can take 1, 2,
3 or 4 values, separated
by a space:
| Number | Description |
|---|---|
1 |
Type for all sides at once. |
2 |
The first value is for top and bottom, the second is for left and right borders. |
3 |
The first value is for top, the second is for left and right borders, the third is for bottom. |
4 |
The first value is for top border, the second is for right, the third is for bottom, the fourth is for left border. |
Example
Let's color the block border red:
<div id="elem"></div>
#elem {
border-width: 1px;
border-style: solid;
border-color: red;
width: 300px;
height: 100px;
}
:
Example
Let's set a red border for the top and bottom sides, and a blue border for the right and left sides:
<div id="elem"></div>
#elem {
border-width: 1px;
border-style: solid;
border-color: red blue;
width: 300px;
height: 100px;
}
:
Example
Let's set a red border for the top side, blue for the right side, green for the bottom side, black for the left side:
<div id="elem"></div>
#elem {
border-width: 1px;
border-style: solid;
border-color: red blue green black;
width: 300px;
height: 100px;
}
:
Example
Let's set different width, type and color of the border at the same time:
<div id="elem"></div>
#elem {
border-width: 1px 2px 3px 4px;
border-style: dashed dotted solid double;
border-color: red blue green black;
width: 300px;
height: 100px;
}
:
Example
If a border color is not specified in border-color - it
will be taken from the
color property:
<div id="elem"></div>
#elem {
color: red;
border-style: solid;
border-width: 2px;
width: 300px;
height: 100px;
}
:
See also
-
the
border-widthproperty
that sets a border width -
the
border-styleproperty
that sets a border style -
the
borderproperty
that is a shorthand property for a border
