CSS właściwość border-end-start-radius

Poprzednia strona border-end-end-radius
Następna strona border-image

Definicja i użycie

border-end-start-radius Atrybut używany do definiowania promienia zaokrąglenia między końcem bloku (block-end) a początkiem wewnętrznym (inline-start).

Uwaga:powiązane atrybuty CSS writing-mode,text-orientation i direction Definiuje kierunek blokowy i wewnętrzny. Dlatego te atrybuty wpływają na border-end-start-radius Wynik atrybutu. Dla stron angielskich, kierunek wewnętrzny to od lewej do prawej, a kierunek blokowy to w dół.

Jeśli border-end-start-radius Jeśli atrybut ma dwie wartości, zaokrąglenie będzie elipsą:

border-end-start-radius: 50px 100px;

Jeśli border-end-start-radius Jeśli atrybut ma wartość, zaokrąglenie będzie kółkiem:

border-end-start-radius: 50px;

CSS border-end-start-radius Atrybuty i border-bottom-left-radius,border-bottom-right-radius,border-top-left-radius i border-top-right-radius jest bardzo podobny do border-end-start-radius Atrybut zależy od kierunku bloku i kierunku wewnętrznego.

Przykład

Przykład 1

Dodaj zaokrąglenia na końcu bloku i na początku kierunku wewnętrznego dla niektórych elementów:

#example1 {
  background-color: lightblue;
  border-end-start-radius: 50px;
}
#example2 {
  background-color: lightblue;
  border-end-start-radius: 50px 20px;
}
#example3 {
  background-color: lightblue;
  border-end-start-radius: 50%;
  direction: rtl;
}
#example4 {
  background-color: lightblue;
  border-end-start-radius: 50%;
  writing-mode: vertical-rl;
}

Spróbuj sam

Przykład 2: Połączenie atrybutu direction

Pozycja zaokrąglenia na końcu bloku i na początku kierunku wewnętrznego jest określona przez direction Wpływ atrybutu:

#example1 {
  border: 2px solid red;
  direction: rtl;
  border-end-start-radius: 25px;
}

Spróbuj sam

Przykład 3: Połączenie atrybutu writing-mode

Pozycja zaokrąglenia na końcu bloku i na początku kierunku wewnętrznego jest określona przez writing-mode Wpływ atrybutu:

#example2 {
  border: 2px solid red;
  writing-mode: vertical-rl;
  border-end-start-radius: 25px;
}

Spróbuj sam

Język CSS

border-end-start-radius: 0|length|initial|inherit;

Wartość atrybutu

Wartość	Opis
0	Domyślna wartość.
length	Definiuje kształt zaokrąglony na końcu bloku i na początku kierunku wewnętrznego. Zobacz:Jednostki CSS.
%	Definiuje kształt zaokrąglony bloku za pomocą procentu długości elementu na odpowiedniej osi.
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ść:	0
Inheredność:	nie
Tworzenie animacji:	Wspierane. Zobacz:Atrybuty animacji.
Wersja:	CSS3
Język JavaScript:	object.style.borderEndStartRadius="50px"