CSS border-end-start-radius Property

Description

The border-end-start-radius CSS property defines the radius of the corner at the end in the block direction and the start in the inline direction. This is a logical property, meaning that it is independent of the element's writing-mode and direction.
The border-end-start-radius property can be set to one, two, three, or four values. The first value is the radius in the block direction at the end of the element, and the second value is the radius in the inline direction at the start of the element. The third and fourth values are the radii in the same directions, but for the opposite corner.

Initial value

0

Applies to

all elements

Inherited

no

Computed value

two absolute lengths or percentages

Animatable

a length, percentage or calc();

JavaScript syntax

object.style.borderEndStartRadius

Interactive Demo

border-end-start-radius: 40px 40px;

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

border-end-start-radius: 30%;
writing-mode: vertical-lr;

border-end-start-radius: 30%;
writing-mode: vertical-rl;

Syntax

border-end-start-radius: <length-percentage>

Values

• <length-percentage>Denotes the size of the circle radius or the semi-major and semi-minor axes of the ellipse. As absolute length it can be expressed in any unit allowed by the CSS <length> data type.

Example

<div>This is a box with a top right rounded corner.</div>

div {
  width:300px;
  height:150px;
  display:flex;
  justify-content:center;
  flex-direction:column;
  background-color:#5b6dcd;
  color:#fff;
  padding:10px;
  border-end-start-radius: 40px;
}

Browser Support

The following table will show you the current browser support for the CSS border-end-start-radius property.

Desktop
89	89	66	75	15

Tablets / Mobile
89	66	63	15	15	89

Last updated by CSSPortal on: 1st January 2024