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

Poprzednia strona border-color
Następna strona border-end-start-radius

Definicja i użycie

border-end-end-radius Atrybut jest używany do określenia promienia zaokrąglenia między końcem bloku (block-end) i końcem wewnętrznym (inline-end).

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-end-radius Wynik atrybutu. Dla stron angielskich, kierunek wewnętrzny to od lewej do prawej, a kierunek blokowy to w dół.

Jeśli border-end-end-radius Atrybut ma dwie wartości, krawędzie zaokrąglone będą elipsą:

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

Jeśli border-end-end-radius Atrybut ma wartość, krawędzie zaokrąglone będą okrągłe:

border-end-end-radius: 50px;

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

Przykład

Przykład 1

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

#example1 {
  background-color: lightblue;
  border-end-end-radius: 50px;
}
#example2 {
  background-color: lightblue;
  border-end-end-radius: 50px 20px;
}
#example3 {
  background-color: lightblue;
  border-end-end-radius: 50%;
  direction: rtl;
}
#example4 {
  background-color: lightblue;
  border-end-end-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 końcu wewnętrznego kierunku jest określona przez direction Wpływ atrybutu:

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

Spróbuj sam

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

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

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

Spróbuj sam

Język CSS

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

Wartość atrybutu

Wartość	Opis
0	Domyślna wartość.
length	Definiuje kształt zaokrąglenia na końcu bloku i na końcu wewnętrznego kierunku.
%	Definiuje kształt zaokrąglenia 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:	Obsługiwane. Zobacz:Atrybuty animacji.
Wersja:	CSS3
Język JavaScript:	object.style.borderEndEndRadius="50px"