Własność CSS border-block-end to zbiorcza własność logiczna służąca do ustawiania szerokości, stylu i koloru końcowej krawędzi 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-end odnosi się do dolnej krawędzi obramowania, a więc odpowiada własności fizycznej border-bottom
.
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-end
odpowiada własności fizycznej border-right
.
Przykład
W tym przykładzie element figure
w orientacji blokowej będzie miał ciągłą końcową krawędź obramowania w kolorze bordowym o szerokości 12 pikseli:
Efekt (przy założeniu, że tekst jest pisany od góry i od lewej):
Poniżej natomiast definiujemy elementowi header
końcową krawędź obramowania w orientacji blokowej jako podwójną różową linię o szerokości 10 pikseli.
Efekt:
Z kolei w następnym przykładzie element div
ma ciągłą końcową krawędź obramowania w orientacji blokowej o szerokości czterech pikseli. Jednak w tym przypadku tekst elementu ma orientację pionową i jest pisany od prawej, dlatego zdefiniowana krawędź obramowania pojawia się po lewej stronie elementu.
Efekt:
Wartości i składnia
Własność border-block-end
przyjmuje takie same wartości, jak jej własności składowe (wartości ujemne są niedozwolone):
border-block-end-width
: liczba z jednostką długości lub słowo kluczowethin
,medium
albothick
. Szczegółowy opis tych słów kluczowych znajduje się w opisie własności border-width. Wartość domyślna:medium
.border-block-end-style
: słowa kluczowenone
,hidden
,dotted
,dashed
,solid
,double
,groove
,ridge
,inset
,outset
. Szczegółowy opis tych słów kluczowych znajduje się w opisie własności border-style. Wartość domyślna:none
.border-block-end-color
: dowolny typ wartości koloru CSS. Wartość domyślna:currentcolor
.
Własność border-block-end
przyjmuje jedną, dwie lub trzy z wymienionych powyżej wartości, a ich kolejność nie ma znaczenia, np. wszystkie poniższe deklaracje są równoważne.
Jeśli któraś wartość zostanie pominięta, to nadawana jest jej wartość początkowa. W praktyce oznacza to, że można pominąć tylko ustawienie szerokości i koloru, ponieważ pominięta własność stylu zostanie domyślnie ustawiona na none
, co będzie oznaczało brak obramowania.
Zastosowanie
Własność border-block-end
ma zastosowanie do wszystkich elementów HTML, a także do pseudoelementu ::first-letter
.
Zastosowanie | Wszystkie elementy HTML i pseudoelement ::first-letter |
---|---|
Własności składowe | |
Obsługiwane wartości | |
Wartość początkowa | Wartości początkowe odpowiadają wartościom początkowym własności składowych, czyli: |
Dziedziczenie | Nie |
Specyfikacja | CSS Logical Properties and Values Level 1 – border-block-end |