Własność CSS border-inline-end

> Dodaj do ulubionych

Własność border-inline-end to logiczna własność zbiorcza służąca do ustawiania szerokości, stylu i koloru końcowej krawędzi obramowania w orientacji śródliniowej 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-inline-end odnosi się do prawej krawędzi obramowania, a więc odpowiada własności fizycznej 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-end odpowiada własności fizycznej border-top.

Przykład

W tym przykładzie element del w orientacji śródliniowej będzie miał ciągłą granatową końcową krawędź obramowania o szerokości 3 pikseli:

del {
  border-inline-end: 3px solid navy;
}
...
<del>Lorem ipsum dolor sit amet.</del>

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

Efekt użycia własności CSS border-inline-end

Poniżej natomiast elementowi ins jako końcową krawędź obramowania w orientacji śródliniowej nadajemy podwójną różową linię o szerokości 4 pikseli.

ins {
  border-inline-end: 4px double lightpink;
}
...
<ins>Lorem ipsum dolor sit amet.</ins>

Efekt:

Efekt użycia własności CSS border-inline-end - podwójna linia

Z kolei w następnym przykładzie element span ma ciągłą końcową krawędź obramowania w orientacji śródliniowej 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ę na dole elementu.

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

Efekt:

Efekt użycia własności CSS border-inline-end do elementu z tekstem pionowym

Wartości i składnia

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

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

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

Podsumowanie

ZastosowanieWszystkie elementy HTML i pseudoelement ::first-letter
Własności składowe
Obsługiwane wartości
Wartość początkowaWartości początkowe odpowiadają wartościom początkowym własności składowych, czyli:
DziedziczenieNie
SpecyfikacjaCSS Logical Properties and Values Level 1 – border-inline-end