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

cssselector {
  border-color: color;
}

Number of values

The property can take 1, 2, 3 or 4 values, separated by a space:

Example

Let's color the block border red:

html<div id="elem"></div>

css#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:

html<div id="elem"></div>

css#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:

html<div id="elem"></div>

css#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:

html<div id="elem"></div>

css#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:

html<div id="elem"></div>

css#elem {
  color: red;
  border-style: solid;
  border-width: 2px;
  width: 300px;
  height: 100px;
}

Результат:

See also