The color of the border of a box.
The border color, combined with border style and border width, can also be specified with the border shorthand property.
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.
Tóm Tắt
Possible Values
ValueExample
[color]#f00
inherit
initial
unset
Multiple Values
One, two, three, or four space-separated values:
ValueNoteExample
[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
border-color is itself a shorthand property. Border color can be set on sides independently with border-top-color, border-right-color, border-bottom-color, and border-left-color.
border-color: red green blue black; is the same as border-top-color: red; border-right-color: green; border-bottom-color: blue; border-left-color: black;, for example.
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. */
Browser support
Supported by all modern browsers.
