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:
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
Zastosowanie | Wszystkie elementy HTML i pseudoelement ::first-letter |
---|---|
Własności składowe | |
Obsługiwane wartości | Liczby z jednostką długości i słowa kluczowe thin , medium lub thick |
Wartość początkowa | medium |
Dziedziczenie | Nie |
Specyfikacja | CSS Logical Properties and Values Level 1 – border-block-width |