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
| Value | Example |
|---|---|
| [color] | #f00 |
inherit | |
initial | |
unset | |
Multiple Values
One, two, three, or four space-separated values:
| Value | Note | Example |
|---|---|---|
| [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 |
Example
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. */