Własność border-inline-start to logiczna własność zbiorcza służąca do ustawiania szerokości, stylu i koloru początkowej 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-start
odnosi się do lewej krawędzi obramowania, a więc odpowiada własności fizycznej border-left
.
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-start
odpowiada własności fizycznej border-bottom
.
Przykład
W tym przykładzie element del
w orientacji śródliniowej będzie miał ciągłą granatową początkową krawędź obramowania o szerokości 3 pikseli:
Efekt (przy założeniu, że tekst jest pisany od góry i od lewej):
Poniżej natomiast elementowi ins
jako początkową krawędź obramowania w orientacji śródliniowej nadajemy podwójną różową linię o szerokości 4 pikseli.
Efekt:
Z kolei w następnym przykładzie element span
ma ciągłą początkową 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 górze elementu.
Efekt:
Alt: Efekt użycia własności CSS border-inline-start do elementu z tekstem pionowymWartości i składnia
Własność border-inline-start
przyjmuje takie same wartości, jak jej własności składowe (wartości ujemne są niedozwolone):
border-inline-start-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-start-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-start-color
: dowolny typ wartości koloru CSS. Wartość domyślna:currentcolor
.
Własność border-inline-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.
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-start
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-start |