border-color

The border-color is a shorthand CSS property that sets the color of the element’s borders.

Syntax

This property can have anywhere from one to four values, similar as with other shorthand CSS properties. If one value is used, that value is applied on all sides, with two values, the first value is for the top and bottom borders, while the second one for the left and right borders. With three values, the top, right and bottom borders are set in that exact order, while the left border also receives the second value (the value of the right border). When all four values are being set, the order is top, right, bottom, left.

/* Shorthand with one value, all borders will have that color: */
border-color: rgba(130, 180, 255, 0.85);

/* Shorthand with two values: top and bottom borders will be red,
left and right borders will be green: */
border-color: red green;

/* Shorthand with three values: top border will be red,
right and left borders will be yellow, bottom border will be green: */
border-color: red yellow green;

/* Shorthand with four values: top border will be transparent,
right border will be #8fff5f, bottom border will be #f6cfba
and the left border will be #edbaf7
border-color: transparent #8fff5f #f6cfba #edbaf7;

Values

color
The border(s) will have that specific color value. This can be in any form of the standard CSS color values.

transparent
The border(s) will be fully transparent.

initial
Global CSS keyword – this sets the property to the default value.

inherit
Global CSS keyword – this sets the property to be inherited from its parent element.

Browser Compatibilty

Demos

Have a code example of border-color? Submit a codepen.io demo and we'll showcase it here ↴