Własność CSS border-block-start

Własność CSS border-block-start to zbiorcza własność logiczna służąca do ustawiania szerokości, stylu i koloru początkowej krawędzi 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-start-style
• border-block-start-color

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-start odnosi się do górnej krawędzi obramowania, a więc odpowiada własności fizycznej border-top.

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-start odpowiada własności fizycznej border-right.

Przykład

W tym przykładzie element article w orientacji blokowej będzie miał ciągłą granatową początkową krawędź obramowania o szerokości 8 pikseli:

article {
  border-block-start: 8px solid navy;
}
...
<article>Lorem ipsum dolor sit amet.</article>

Efekt (przy założeniu, że tekst jest pisany od góry i od lewej):

Poniżej natomiast definiujemy elementowi header początkową krawędź obramowania w orientacji blokowej jako podwójną różową linię o szerokości 10 pikseli.

header {
  border-block-start: 10px double lightpink;
  writing-mode: horizontal-tb;
  direction: ltr;
}
...
<header>Lorem ipsum dolor sit amet.</header>

Efekt:

Z kolei w następnym przykładzie element div ma ciągłą początkową 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 prawej stronie elementu.

div {
  border-block-start: 4px solid lightpink;
  writing-mode: vertical-rl;
 }
...
<div>Lorem ipsum dolor.</div>

Efekt:

Wartości i składnia

Własność border-block-start przyjmuje takie same wartości, jak jej własności składowe (wartości ujemne są niedozwolone):

• border-block-start-width: liczba z jednostką długości lub słowo kluczowe thin, medium albo thick. Szczegółowy opis tych słów kluczowych znajduje się w opisie własności border-width. Wartość domyślna: medium.
• border-block-start-style: słowa kluczowe none, 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-start-color: dowolny typ wartości koloru CSS. Wartość domyślna: currentcolor.

Własność border-block-start 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.

border-block-start: 10px groove black;
border-block-start: black groove 10px;
border-block-start: groove 10px black;

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-start ma zastosowanie do wszystkich elementów HTML, a także do pseudoelementu ::first-letter.

Podsumowanie