In this section, we will learn what the border-color property is and how to use it in CSS.

Click here to run the example of border-color property.

CSS border-color Property Definition and Usage

The border-color property is a shorthand property and is used to apply colors to the borders of an element.

Basically, with this property, we can change the color of each border of an element and set a specific color for it or be more general and apply one color for all of them in one declaration.

CSS border-color Property Syntax

border-color: color|transparent|initial|inherit;

border-color: value1 value2 value3 value4

When we set 4 values for this property: the first value sets the color of the top border, the second value sets the color of the right border, the third value sets the color of the bottom border and the last value sets the color of the left border.

border-color: value1 value2 value3

When we set 3 values for this property: the first value sets the color of the top border, the second value sets the color of the right and left borders, and the last value sets the color of the bottom border.

border-color: value1 value2

When we set 2 values for this property: the first value sets the color of the top and bottom borders, and the second value sets the color of the left and right borders.

border-color: value

When we only set one value for this property, the entire borders set to the same color value.

CSS border-color Property Value

The values we can set for this property are as follows:

• Named colors: red green blue orange brown, etc.
• RGB and RGBA: rgb(123,255,200)
• HSL and HSLA: hsl( 123, 40%, 70%);
• HEX: #bbbbaa

Example: border-color property in CSS

See the Pen border-color property in CSS by Enjoy Tutorials (@enjoytutorials) on CodePen.

How Does CSS border-color Property Work?

As you can see in this example, we have three elements and with the help of border-color property, we’ve changed their border colors.

Example: CSS table border color

See the Pen CSS table border color by Enjoy Tutorials (@enjoytutorials) on CodePen.