CSS border-end-start-radius attribute

Definition and Usage

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

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

If border-end-start-radius If an attribute has two values, the rounding will be an ellipse:

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

If border-end-start-radius If an attribute has a value, the rounding will be a circle:

border-end-start-radius: 50px;

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

Instance

Example 1

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

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

Try It Yourself

Example 2: Combined with the direction property

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

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

Try It Yourself

Example 3: Combined with the writing-mode property

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

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

Try It Yourself

CSS Syntax

border-end-start-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 Page

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 attribute

Reference:CSS text-orientation attribute

Reference:CSS writing-mode attribute