CSS border-end-start-radius egenskab

Forrige side border-end-end-radius
Næste side border-image

Definition og brug

border-end-start-radius Egenskaben bruges til at definere radiusen mellem elementets blokretningens ende (block-end) og indre retningens start (inline-start).

Bemærk:relaterede CSS-egenskaber writing-mode,text-orientation og direction Definerer blokretning og indre retning. Dette er også grunden til, at disse egenskaber også påvirker border-end-start-radius Resultatet af egenskaben. For engelske sider, er den indre retning fra venstre til højre, og blokretning er nedad.

Hvis border-end-start-radius Hvis en egenskab har to værdier, vil rundkanten være elliptisk:

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

Hvis border-end-start-radius Hvis en egenskab har en værdi, vil rundkanten være cirkulær:

border-end-start-radius: 50px;

CSS border-end-start-radius Egenskab med border-bottom-left-radius,border-bottom-right-radius,border-top-left-radius og border-top-right-radius er meget ligner, men border-end-start-radius Egenskaben afhænger af blokretning og inline-retning.

Eksempel

Eksempel 1

Tilføj cirkelradius til bloks endes og inline startes for nogle elementer:

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

Prøv det selv

Eksempel 2: Kombiner direction egenskab

Bloks endes og inline startes cirkelradius position påvirkes af direction Egenskabens indflydelse:

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

Prøv det selv

Eksempel 3: Kombiner writing-mode egenskab

Bloks endes og inline startes cirkelradius position påvirkes af writing-mode Egenskabens indflydelse:

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

Prøv det selv

CSS syntaks

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

Egenskabsværdi

Værdi	Beskrivelse
0	Standardværdi.
length	Definerer blokformens ende og inlineformens start cirkelradius. Se:CSS units.
%	Definerer blokformen af cirkelradius som en procentdel af elementets længde på den tilsvarende akse.
initial	Sæt denne egenskab til dens standardværdi. Se: initial.
inherit	Arv denne egenskab fra sin forældrelige element. Se: inherit.

Tekniske detaljer

Standardværdi:	0
Arvbarhed:	Nej
Animation fremstilling:	Understøttet. Se:Animationelle egenskaber.
Version:	CSS3
JavaScript syntaks:	object.style.borderEndStartRadius="50px"