# 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-width` property
  that sets a border width
- the `border-style` property
  that sets a border style
- the `border` property
  that is a shorthand property for a border

← →
↑
en ru