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:
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 kluczowethin
,medium
albothick
. 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 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-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
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-inline |