CSS Property: border-color

The border-color property sets the color of the four borders of an element. This property can have one to four values.

EXAMPLE

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>border-color</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

    <style>
        * {
            box-sizing: border-box;
        }
        div {
            padding: 10px;
            margin-bottom: 10px;
            border: 8px solid;
        }
        div.a {
            border-color: orange yellow greenyellow blue;
        }
        div.b {
            border-color: orange yellow blue;
        }
        div.c {
            border-color: orange yellow;
        }
        div.d {
            border-color: orange;
        }
    </style>
</head>
<body>
<div class="a">border-color: orange yellow greenyellow blue;</div>
<div class="b">border-color: orange yellow blue;</div>
<div class="c">border-color: orange yellow;</div>
<div class="d">border-color: orange;</div>
</body>
</html>

RESULT

If the property has four values: border-color: orange, yellow, greenyellow, blue; it means:

The top border is orange.
The right border is yellow.
The bottom border is greenyellow.
The left border is blue.

If the property has three values: border-color: orange, yellow, blue; it means:

The top border is orange.
The right and left borders are yellow.
The bottom border is blue.

If the property has two values: border-color: orange, yellow; it means:

The top and bottom borders are orange.
The right and left borders are yellow.

If the property has one value: border-color: orange; it means:

All four borders are orange.

The border-style property must always be declared before the border-color property because the element needs to have borders before we can set their colors.