kurstillfällningslista

CSS referens manual

CSS-attribut

valfria kurser

Kursrekommendation:

CodeW3C.com presentasjonslåda

CSS border-start-end-radius egenskap

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

Definition och användning

border-start-end-radius egenskapen används för att definiera avståndet mellan elementets block-start och inline-end:

Observera:relaterade CSS-egenskaper writing-mode,text-orientation and direction definierar block-riktningen och inline-riktningen. Det är därför dessa egenskaper också påverkar border-start-end-radius resultatet av egenskapen. För engelska sidor, inline-riktningen är från vänster till höger, och block-riktningen är nedåt.

om border-start-end-radius om egenskapen har två värden, kommer avrundningen att vara ellipsoid:

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

om border-start-end-radius om egenskapen har ett värde, kommer avrundningen att vara cirkulär:

border-start-end-radius: 50px;

CSS border-start-end-radius egenskap och border-bottom-left-radius,border-bottom-right-radius,border-top-left-radius and border-top-right-radius attributes are very similar, but border-start-end-radius The attribute depends on the block direction and the inline direction.

Instance

Example 1

Add rounded corners to the start of the block direction and the end of the inline direction for some elements:

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

Try it yourself

Example 2: Combined with the direction attribute

The rounded corner position at the start of the block direction and at the end of the inline direction is affected by direction Attribute effects:

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

Try it yourself

Example 3: Combined with the writing-mode attribute

The rounded corner position at the start of the block direction and at the end of the inline direction is affected by writing-mode Attribute effects:

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

Try it yourself

CSS syntax

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

Attribute value

Value	Description
0	Default value.
length	Define the rounded shape at the start of the block direction and at the end of the inline direction. See:CSS enheter.
%	Define the rounded shape as a percentage of the length of the element on the corresponding axis.
initial	Sets this property to its default value. See initial.
inherit	Inherits this property from its parent element. See inherit.

Technical details

Default value:	0
Inheritance:	No
Animation creation:	Supported. See:Animation-related properties.
Version:	CSS3
JavaScript syntax:	object.style.borderStartEndRadius="50px"