Własność CSS border-block-width

Własność border-block-width to logiczna własność zbiorcza CSS służąca do ustawiania szerokości 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:

• border-block-start-width
• border-block-end-width

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-width odnosi się do górnej i dolnej krawędzi obramowania, a więc odpowiada indywidualnym własnościom fizycznym border-top-width i border-bottom-width.

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-width odpowiada indywidualnym własnościom fizycznym border-left-width i border-right-width.

Przykład

W tym przykładzie element article będzie miał brązowe ciągłe obie krawędzie obramowania w orientacji blokowej o szerokości 5 pikseli:

article {
  border-block-width: 5px;
  border-block-style: solid;
  border-block-color: brown;
}
...
<article>Lorem ipsum dolor sit amet.</article>

Efekt:

Wartości

Własność border-block-width przyjmuje jako wartości liczby z jednostką długości lub wartości procentowe.

Składnia

Własność border-block-width przyjmuje jedną lub dwie wartości szerokości obramowania.

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

  border-block-width: 5px;

  Obie krawędzie obramowania w orientacji blokowej będą miały szerokość 5 pikseli. To samo, co:

  border-block-start-width: 5px;
  border-block-end-width: 5px;

• 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-width: 5px 10px;

  Krawędź początkowa będzie miała 5 pikseli szerokości, a końcowa – 10. To samo, co:

  border-block-start-width: 5px;
  border-block-end-width: 10px;

  Przykładowy efekt:

  

Zastosowanie

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

Podsumowanie