Własność CSS border-color

Własność CSS border-color to własność zbiorcza CSS służąca do ustawiania koloru wszystkich czterech krawędzi obramowania elementu. Jest to własność niedziedziczona, która obejmuje następujące własności obramowania:

• border-top-color
• border-right-color
• border-bottom-color
• border-left-color

Przykład

W tym przykładzie element header będzie miał zielone przerywane obramowanie o szerokości 5 pikseli:

header {
  border-width: 5px;
  border-style: dashed;
  border-color: green;
  width: 200px;
}
...
<header>Lorem ipsum dolor sit amet.</header>

Efekt:

Wartości

Wartością własności border-color może być dowolna wartość koloru CSS. Wartością początkową własności border-color jest currentcolor.

Składnia

Własność border-color przyjmuje jedną, dwie, trzy lub cztery wartości. Jeśli wartości jest mniej niż cztery, to brakujące są uzupełniane automatycznie wg poniższych zasad:

• Jedna wartość: jeśli zostanie zdefiniowana tylko jedna wartość, to zostanie ona zastosowana do wszystkich czterech krawędzi obramowania, np.:

  border-color: green;

  Wszystkie cztery krawędzie obramowania będą zielone. To samo, co:

  border-top-color: green;
  border-right-color: green;
  border-bottom-color: green;
  border-left-color: green;

• Dwie wartości: jeśli są zdefiniowane dwie wartości, to pierwsza odnosi się do górnej i dolnej krawędzi obramowania, a druga – do lewej i prawej, np.:

  border-color: green red;

  Górna i dolna krawędź obramowania będą zielone, a lewa i prawa – czerwone. To samo, co:

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

• Trzy wartości: jeśli są zdefiniowane trzy wartości, to pierwsza odnosi się do górnej krawędzi obramowania, druga – do lewej i prawej, a trzecia – do dolnej.

  border-color: green red black;

  Górna krawędź obramowania byłaby zielona, lewa i prawa czerwone, a dolna byłaby czarna:

  border-top-color: green;
  border-right-color: red;
  border-bottom-color: black;
  border-left-color: red;

• Cztery wartości: jeśli są zdefiniowane cztery wartości, to odnoszą się po kolei do górnej, prawej, dolnej i lewej krawędzi obramowania.

  border-color: green red black yellow;

  Górna krawędź będzie zielona, prawa – czerwona, dolna – czarna, a lewa – żółta.

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

Zastosowanie

Własność border-color ma zastosowanie do wszystkich elementów HTML, a także do pseudoelementu ::first-letter.

Podsumowanie