Skip to navigation

CSS Property: border-color

The color of the border of a box.

With one value, the border-color property can be used to specify a uniform color border around a box. With two, three, or four values, sides can be specified independently.

Possible Values


Multiple Values

One, two, three, or four space-separated values:

[value][top, right, bottom, and left]red
[value] [value][top and bottom] [left and right]red green
[value] [value] [value][top] [right and left] [bottom]red green blue
[value] [value] [value] [value][top] [right] [bottom] [left]red green blue black


aside { border-style: solid; }
/* Establishes a border style for border colors to apply (assuming the following are aside elements) */

.butterfly{ border-color: hsl(32, 100%, 50%); }
/* Uniform orange border on all four sides. */

.earwig { border-color: navy fuchsia; }
/* Top and bottom borders are navy. Left and right borders are fuchsia. */

.beetle { border-color: #fff #888 transparent; }
/* Top border is white. Left and right borders are gray. Bottom border is transparent. */

.ant { border-color: red green blue black; }
/* Top border is red. Right border is green. Bottom border is blue. Left border is black. */

Browser support