CSS border-start-end-radius property

Definition and Usage

border-start-end-radius The property is used to define the corner radius between the start of the element block direction (block-start) and the end of the inline direction (inline-end).

Note:related CSS properties writing-mode,text-orientation and direction Defines the block direction and inline direction. That's why these properties also affect border-start-end-radius The result of the property. For English pages, the inline direction is from left to right, and the block direction is downward.

If border-start-end-radius If a CSS property has two values, the corner will be an ellipse:

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

If border-start-end-radius If a CSS property has a value, the corner will be a circle:

border-start-end-radius: 50px;

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

Example

Example 1

Add rounded corners at the start of the block direction and at 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 property

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

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

Try it yourself

Example 3: Combined with the writing-mode property

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

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

Property value

Technical details

Browser support

The numbers in the table represent the browser version that first fully supports this property.

Related pages

Tutorial:CSS rounded corners

Reference:CSS border-bottom-left-radius attribute

Reference:CSS border-bottom-right-radius attribute

Reference:CSS border-top-left-radius property

Reference:CSS border-top-right-radius property

Reference:CSS direction property

Reference:CSS text-orientation attribute

Reference:CSS writing-mode attribute