CSS Lastnost: border-color

Lastnost border-color nastavi barvo štirih obrob elementa. Ta lastnost ima lahko od ene do štiri vrednosti.

PRIMER

<!DOCTYPE html>
<html lang="sl">
<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>

REZULTAT

Če ima lastnost štiri vrednosti: border-color: orange, yellow, greenyellow, blue; pomeni:

Zgornja obroba je oranžna.
Desna obroba je rumena.
Spodnja obroba je zeleno-rumena.
Leva obroba je modra.

Če ima lastnost tri vrednosti: border-color: orange, yellow, blue; pomeni:

Zgornja obroba je oranžna.
Desna in leva obroba je rumena.
Spodnja obroba je modra.

Če ima lastnost dve vrednosti: border-color: orange, yellow; pomeni:

Zgornja in spodnja obroba je oranžna.
Desna in leva obroba je rumena.

Če ima lastnost eno vrednost: border-color: orange; pomeni:

Vse štiri obrobe so oranžne.

Lastnost border-style moramo vedno deklarirati pred border-color lastnostjo, ker mora element imeti obrobe, preden spremenimo barve le-teh.