CSS właściwość border-inline-start

Poprzednia strona border-inline-end-width
Następna strona border-inline-start-color

Definicja i użycie

border-inline-start Atrybut jest skrótem dla następujących atrybutów:

CSS border-inline-start Atrybuty są odpowiednikiem atrybutów CSS border-bottom,border-left,border-right i}} border-top Bardzo podobne, ale border-inline-start Atrybuty zależą od kierunku wewnętrznego.

Uwaga:powiązane atrybuty CSS writing-mode,text-orientation i}} direction Definiuje kierunek wewnętrzny. To wpływa na początek i koniec wiersza oraz border-inline-start Wynik atrybutu. Dla stron angielskich, kierunek wewnętrzny to z lewej na prawo, a kierunek blokowy to z góry na dół.

Przykład

Przykład 1

Ustaw szerokość, kolor i styl ramki w kierunku wewnętrznym:

div {
  border-inline-start: 10px solid pink;
}

Spróbuj sam!

Przykład 2: Połączenie z atrybutem writing-mode

Pozycja ramki w kierunku wewnętrznym linii zależy od writing-mode Wpływ atrybutu:

div {
  writing-mode: vertical-rl;
  border-inline-start: 5px solid blue;
}

Spróbuj sam!

Przykład 3: Połączenie z atrybutem direction

Pozycja ramki w kierunku wewnętrznym linii zależy od direction Wpływ atrybutu:

div {
  direction: rtl;
  border-inline-start: 5px solid hotpink;
}

Spróbuj sam!

Gramatyka CSS

border-inline-start: border-inline-start-width border-inline-start-style border-inline-start-color|initial|inherit;

Wartość atrybutu

Wartość	Opis
border-inline-start-width	Określa szerokość ramki elementu w kierunku wewnętrznym. Domyślną wartością jest medium.
border-inline-start-style	Określa styl ramki elementu w kierunku wewnętrznym. Domyślną wartością jest none.
border-inline-start-color	Określa kolor ramki elementu w kierunku wewnętrznym. Domyślną wartością jest obecny kolor ramki.
initial	Ustaw tę właściwość na jej wartość domyślną. Zobacz: initial.
inherit	Dziedziczy tę właściwość od elementu nadrzędnego. Zobacz: inherit.

Szczegóły techniczne

Domyślna wartość:	medium none currentcolor
Inheredność:	Nie
Tworzenie animacji:	Obsługiwane. Zobacz:Atrybuty animacji.
Wersja:	CSS3
Gramatyka JavaScript:	object.style.borderInlineStart="pink dotted 5px"