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;
}

The border-color property

Syntax

Number of values

Example

Example

Example

Example

Example

See also