CSS border-color

Słownik kwalifikacji INF.03 - Tworzenie i administrowanie stronami i aplikacjami internetowymi oraz bazami danych

CSS border-color

Właściwość border-color służy do ustawiania koloru obramowania elementu HTML. Może określać kolor jednej, dwóch, trzech lub czterech krawędzi. Aby kolor był widoczny, obramowanie musi mieć także ustawiony styl, np. solid, oraz szerokość, np. 1px.

Kolejność wartości

Dla czterech wartości obowiązuje kolejność zgodna z ruchem wskazówek zegara:

  1. góra (top)
  2. prawa (right)
  3. dół (bottom)
  4. lewa (left)

Przykład:

border: solid 1px;
border-color: red blue green yellow;

Oznacza to:

  • górna krawędź: red, czyli czerwona,
  • prawa krawędź: blue, czyli niebieska,
  • dolna krawędź: green, czyli zielona,
  • lewa krawędź: yellow, czyli żółta.

Skrócony zapis dla różnej liczby wartości

border-color: red;

Wszystkie krawędzie mają kolor czerwony.

border-color: red blue;

Góra i dół są czerwone, prawa i lewa krawędź są niebieskie.

border-color: red blue green;

Góra jest czerwona, prawa i lewa są niebieskie, dół jest zielony.

border-color: red blue green yellow;

Góra czerwona, prawa niebieska, dół zielony, lewa żółta.

Indywidualne ustawianie krawędzi

Kolory można też ustawiać osobno:

border-top-color: red;
border-right-color: blue;
border-bottom-color: green;
border-left-color: yellow;

Na egzaminie INF.03 warto zapamiętać zasadę: góra, prawa, dół, lewa.