Własność CSS border-inline

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

• border-inline-width
• border-inline-style
• border-inline-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-inline odnosi się do lewej i prawej krawędzi obramowania, a więc odpowiada własnościom fizycznym border-left i border-right.

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-inline odpowiada własnościom fizycznym border-top i border-bottom.

Własności obejmowane przez własność border-inline też są własnościami zbiorczymi, odnoszącymi się do obu logicznych krawędzi obramowania w orientacji śródliniowej. Dlatego za jej pomocą można w zwięzły sposób zdefiniować wygląd obu tych krawędzi elementu na raz, np.:

border-inline: 1px solid black;

Ta zbiorcza deklaracja CSS jest równoważna trzem poniższym deklaracjom zbiorczym:

border-inline-width: 1px;
border-inline-style: solid;
border-inline-color: black;

A nawet jest równoważna tym sześciu deklaracjom indywidualnym:

border-inline-start-width: 1px;
border-inline-start-style: solid;
border-inline-start-color: black;
border-inline-end-width: 1px;
border-inline-end-style: solid;
border-inline-end-color: black;

Jak widać, własność skrótowa border-inline pozwala zaoszczędzić naprawdę dużo pracy.

Przykład

W tym przykładzie obie krawędzie obramowania elementu span w orientacji śródliniowej będą zielone, ciągłe oraz o szerokości 5 pikseli:

span {
  border-inline: 5px solid green;
  writing-mode: horizontal-tb;
  direction: ltr;
}
...
<span>Lorem ipsum dolor sit amet.</span>

Efekt:

Poniżej natomiast nadajemy elementowi header podwójne różowe obramowanie w orientacji śródliniowej o szerokości 10 pikseli.

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

Efekt:

Z kolei w następnym przykładzie element b ma ciągłe obramowanie w orientacji śródliniowej o szerokości czterech pikseli. Jednak w tym przypadku tekst elementu ma orientację pionową i jest pisany od prawej, dlatego zdefiniowane krawędzie obramowania pojawiają się na górze i na dole elementu.

b {
  border-inline: 4px solid lightpink;
  writing-mode: vertical-rl;
 }
...
<b>Lorem ipsum dolor sit amet.</b>

Efekt:

Wartości i składnia

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

• border-inline-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-inline-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-inline-color: dowolny typ wartości koloru CSS. Wartość domyślna: currentcolor.

Własność border-inline 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-inline: 10px groove black;
border-inline: black groove 10px;
border-inline: 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-inline ma zastosowanie do wszystkich elementów HTML, a także do pseudoelementu ::first-letter.

Podsumowanie