CSS border-end-end-radius egenskap

Föregående sida border-color
Nästa sida border-end-start-radius

Definition och användning

border-end-end-radius Egenskapen används för att definiera elementets kantbågeens radiuser mellan block-ändan (block-end) och inline-ändan (inline-end).

Observera:Relaterade CSS-egenskaper writing-mode,text-orientation och direction Definierar block-riktningen och inline-riktningen. Det är därför dessa egenskaper också påverkar border-end-end-radius Egenskapens resultat. För engelska sidor, är inline-riktningen från vänster till höger, och block-riktningen är nedåt.

Om border-end-end-radius Egenskapen har två värden, då kommer kantbågen att vara elliptisk:

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

Om border-end-end-radius Egenskapen har ett värde, då kommer kantbågen att vara cirkulär:

border-end-end-radius: 50px;

CSS border-end-end-radius egenskaper är lika border-bottom-left-radius,border-bottom-right-radius,border-top-left-radius och border-top-right-radius är mycket lika, men border-end-end-radius Egenskapen är beroende av blockriktning och inline-riktning.

Exempel

Exempel 1

Lägg till rundkant vid slutet av blockriktningen och slutet av inline-riktningen för vissa element:

#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;
}

Prova själv

Exempel 2: Kombinera direction-egenskapen

Positionen av rundkanten vid slutet av blockriktningen och inline-riktningen påverkas av direction Påverkan av egenskapen:

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

Prova själv

Exempel 3: Kombinera writing-mode-egenskapen

Positionen av rundkanten vid slutet av blockriktningen och inline-riktningen påverkas av writing-mode Påverkan av egenskapen:

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

Prova själv

CSS-syntax

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

Egenskapsvärde

Värde	Beskrivning
0	Standardvärde.
length	Definiera rundkantformen vid slutet av blockriktningen och slutet av inline-riktningen.
%	Definiera denna rundkantform genom procentandel av elementets längd på motsvarande axel.
initial	Sätt denna egenskap till dess standardvärde. Se till: initial.
inherit	Följ denna egenskap från föräldrelementet. Se till: inherit.

Tekniska detaljer

Standardvärde:	0
Arvande:	Nej
Animeringsproduktion:	Stöd. Se till:Animeringsrelaterade egenskaper.
Version:	CSS3
JavaScript-syntax:	object.style.borderEndEndRadius="50px"