CSS border-start-end-radius egenskab

Forrige side border-spacing
Næste side border-start-start-radius

Definition og brug

border-start-end-radius egenskaben bruges til at definere radien mellem elementets blokretning starter (block-start) og indrykningens ende (inline-end).

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

hvis border-start-end-radius hvis egenskaben har to værdier, vil rundkanten være ellipseformet:

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

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

border-start-end-radius: 50px;

CSS border-start-end-radius egenskab med border-bottom-left-radius,border-bottom-right-radius,border-top-left-radius og border-top-right-radius er meget lik, men border-start-end-radius Egenskapen avhenger av blokkretning og inline-rettning.

Eksempel

Eksempel 1

Legg til rundkant ved start av blokkretning og ved slutten av inline-rettning for noen elementer:

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

Prøv selv

Eksempel 2: Kombinert med direction-egenskapen

Plasseringen av rundkantene ved start av blokkretning og ved slutten av inline-rettning påvirkes av direction Egenskapsinnvirkning:

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

Prøv selv

Eksempel 3: Kombinert med writing-mode-egenskapen

Plasseringen av rundkantene ved start av blokkretning og ved slutten av inline-rettning påvirkes av writing-mode Egenskapsinnvirkning:

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

Prøv selv

CSS-syntaks

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

Egenskapsverdi

Verdi	Beskrivelse
0	Standardverdi.
length	Definerer rundkantform ved start av blokkretning og ved slutten av inline-rettning. Se:CSS enheder.
%	Definerer rundkantform, uttrykt som en prosentandel av elementets lengde på den tilsvarende aksen.
initial	Sett denne egenskapen til standardverdien. Se: initial.
inherit	Arv denne egenskapen fra foreldrelementet. Se: inherit.

Teknisk detalj

Standardverdi:	0
Arv:	Nei
Animasjonsproduksjon:	Støttet. Se:Animasjonsrelaterte egenskaper.
Versjon:	CSS3
JavaScript-syntaks:	object.style.borderStartEndRadius="50px"