Własność CSS border-block-color

> Dodaj do ulubionych

Własność CSS border-block-color to logiczna własność zbiorcza służąca do ustawiania koloru obu krawędzi (początkowej i końcowej) obramowania w orientacji blokowej elementu. Ta własność niedziedziczona obejmuje następujące indywidualne logiczne własności obramowania:

Wybór krawędzi przez tę własność zależy od orientacji i kierunku tekstu. Jeśli na przykład tekst jest pisany od góry i od lewej (jak w języku polskim), to własność border-block-color odnosi się do górnej i dolnej krawędzi obramowania, a więc odpowiada indywidualnym własnościom fizycznym border-top-color i border-bottom-color.

Jeżeli natomiast tekst jest pisany od prawej do lewej i w orientacji pionowej (jak np. w języku japońskim), to własność border-block-color odpowiada indywidualnym własnościom fizycznym border-left-color i border-right-color.

Przykład

W tym przykładzie element header będzie miał zielone przerywane obie krawędzie obramowania w orientacji blokowej o szerokości 5 pikseli:

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

Efekt:

Efekt użycia własności border-block-color

Wartości

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

Składnia

Własność border-block-color przyjmuje jedną lub dwie wartości koloru CSS:

  • Jedna wartość: jeśli zostanie zdefiniowana tylko jedna wartość, to zostanie ona zastosowana do obu krawędzi obramowania, np.:
    border-block-color: green;

    Obie krawędzie obramowania w orientacji blokowej będą zielone. To samo, co:

    border-block-start-color: green;
    border-block-end-color: green;
  • Dwie wartości: jeśli są zdefiniowane dwie wartości, to pierwsza odnosi się do początkowej krawędzi obramowania w orientacji blokowej elementu, a druga – do końcowej krawędzi obramowania w orientacji blokowej elementu, np.:
    border-block-color: green red;

    Krawędź początkowa będzie zielona, a końcowa – czerwona. To samo, co:

    border-block-start-color: green;
    border-block-end-color: red;

    Przykładowy efekt:

    Przykład użycia własności border-block-color

Zastosowanie

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

Podsumowanie

ZastosowanieWszystkie elementy HTML i pseudoelement ::first-letter
Własności składowe
Obsługiwane wartościWartość koloru CSS
Wartość początkowacurrentcolor
DziedziczenieNie
SpecyfikacjaCSS Logical Properties and Values Level 1 – border-block-color