CSS border-color Property

CSS border-color property sets the color of the HTML element’s four borders, namely, top, right, bottom, and left.

border-color is a short hand property to specify border-top-color, border-right-color, border-bottom-color, and border-left-color values in a single shot.

border-color property can be assigned with one, two, three, or four values.

</>
Copy
border-color: red blue green black;
border-color: red blue green;
border-color: red blue;
border-color: red;

We shall go through each of these scenarios with examples.

border-color with four values

An example with border-color property set with four values.

</>
Copy
border-color: red blue green black;

where the order of sides is top, right, bottom, and left respectively, as shown in the following.

</>
Copy
border-color: red  blue   green   black;
           /* top  right  bottom  left */

Example

</>
Copy
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style>
        div {
            width: 161px;
            height: 100px;
        }
        #div1 {
            border: 10px solid;
            border-color: red blue green black;
        }
    </style>
</head>
<body>
    <div id="div1"></div>
</body>
</html>

border-color with three values

An example with border-color property set with three values.

</>
Copy
border-color: red blue green;

where the order of sides is top, right, and bottom respectively. For left, the value for right is considered, as shown in the following.

</>
Copy
border-color: red  blue   green  ;
           /* top  right  bottom  */
           /*      left           */

Example

</>
Copy
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style>
        div {
            width: 161px;
            height: 100px;
        }
        #div1 {
            border: 10px solid;
            border-color: red blue green;
        }
    </style>
</head>
<body>
    <div id="div1"></div>
</body>
</html>

border-color with two values

An example with border-color property set with two values.

</>
Copy
border-color: red blue;

where the first value is for top and bottom side border color, and the second value is for right and left side border color, as shown in the following example.

</>
Copy
border-color: red    blue  ;
           /* top    right  */
           /* bottom left   */

Example

</>
Copy
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style>
        div {
            width: 161px;
            height: 100px;
        }
        #div1 {
            border: 10px solid;
            border-color: red blue;
        }
    </style>
</head>
<body>
    <div id="div1"></div>
</body>
</html>

border-color with one value

An example with border-color property set with only one value.

</>
Copy
border-color: red;

where the specified value is set as border color for all sides: top, right, bottom, and left, as shown in the following.

</>
Copy
border-color: red;
           /* top       */
           /* right     */
           /* bottom    */
           /* left      */

Example

</>
Copy
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style>
        div {
            width: 161px;
            height: 100px;
        }
        #div1 {
            border: 10px solid;
            border-color: red;
        }
    </style>
</head>
<body>
    <div id="div1"></div>
</body>
</html>

Conclusion

In this CSS Tutorial, we learned about border-color property, and how to use this property for HTML Elements, with examples.