CSS Reference Property

border-color

The border-color property is used to set the color of the borders of an element.

It is a shorthand property for the border-top-color, border-right-color, border-bottom-color, and border-left-color properties.

The value of the border-color property can be specified using one, two, three, or four components.

When one value is used, the value specifies the color of the top, right, bottom, and left borders. If two values are used, the first value specifies the color of the top and bottom borders and the second value specifies the color of the right and left borders. If three values are used, the first one specifies the color of the top border, the second one specifies the color of the right and left borders, and the third one specifies the color of the bottom border. If four values are used, the first, second, third, and fourth values specify the color of the top, right, bottom, and left borders respectively.

Official Syntax

Syntax:
```
border-color: <color>
```
Initial: The concatenation of the long-hand properties:
- border-top-color: currentColor
- border-right-color: currentColor
- border-bottom-color: currentColor
- border-left-color: currentColor
Applies To: all elements
Animatable: yes, the long-hand properties are animatable as <color>s

Values

<color>: See the <color> entry for a list of possible values.

Notes

The border-color property can also inherit the value of the element’s parent’s border color using the keyword inherit.

Examples

The following are all valid border-color values set on an element. The element’s border style and border width are also set using the border-style and border-width respectively.

.element {
    border-style: dotted;
    border-width: 1em;

    border-color: red; /* one-value syntax */

    /* or */
    border-color: red green; /* two-value syntax */

    /* or */
    border-color: red pink green; /* three-value syntax */
    
    /* or */
    border-color: red pink yellow green; /* four-value syntax */
}

Live Demo

Check out the live demo:

View this demo on the Codrops Playground

Browser Support

The property works in all major browsers: Chrome, Firefox, Safari, Opera, IE, and on Android and iOS.