border-color#

#Introduction

The border-color shorthand CSS property sets the color (border-top-color, border-right-color, border-bottom-color, border-left-color) of an element's border.

#Examples

<Go/>

css-apisrc/border-color/App.tsx

Code

Preview

#Syntax

/* border-color: color; */
border-color: red;

/* border-color: vertical horizontal; */
border-color: red #f015ca;

/* border-color: top horizontal bottom; */
border-color: red yellow green;

/* border-color: top right bottom left; */
border-color: red yellow green blue;

#Values

The <color> property may be specified using one, two, three, or four values.

• When one value is specified, it applies the same color to all four sides.
• When two values are specified, the first color applies to the border-top-color and border-bottom-color, the second to the border-left-color and border-right-color.
• When three values are specified, the first color applies to the border-top-color, the second to the border-left-color and border-right-color, the third to the border-bottom-color.
• When four values are specified, the colors apply to the border-top-color, border-right-color, border-bottom-color and border-left-color in that order (clockwise).

#Formal definition

#Formal syntax

<color>{1, 4}

#Compatibility