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

Example of the Border
End Start Radius Property

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
Edge Chrome Firefox Opera Safari
8989667515
Tablets / Mobile
Chrome Firefox Opera Safari Samsung Webview
896663151589

Last updated by CSSPortal on: 1st January 2024