CSS border-end-start-radius Property

CSS border-end-start-radius

The border-end-start-radius property in CSS defines the rounded corner radius for the end-start corner of an element. The end-start corner is determined by the writing mode, directionality, and text orientation of the element. This property is useful for creating flexible, rounded designs in layouts.

Syntax of border-end-start-radius

</>

Copy

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

Values

Value	Description
`0`	Specifies no rounding for the corner (default).
`length`	Specifies the radius of the corner using any valid CSS length unit (e.g., `px`, `em`, `rem`).
`initial`	Sets the property to its default value (`0`).
`inherit`	Inherits the value from its parent element.

Default Value

0

Examples for border-end-start-radius

Using the CSS border-end-start-radius Property

The following examples demonstrate how to use the border-end-start-radius property to set rounded corners for the end-start side of an element.

</>

Copy

/* Set the end-start corner radius to 20px */
.element {
  border-end-start-radius: 20px;
}

/* Set the end-start corner radius to 50% */
.element {
  border-end-start-radius: 50%;
}

/* Remove rounding for the end-start corner */
.element {
  border-end-start-radius: 0;
}

/* Inherit the end-start corner radius from the parent element */
.element {
  border-end-start-radius: inherit;
}

Example for a Rounded End-Start Corner

Below is an example demonstrating how to apply a rounded corner to the end-start side using border-end-start-radius: 30px:

index.html

</>

Copy

<!DOCTYPE html>
<html lang="en">
<head>
<style>
  .box {
    width: 200px;
    height: 200px;
    background-color: #4CAF50;
    border-end-start-radius: 30px;
  }
</style>
</head>
<body>

<div class="box"></div>

</body>
</html>

Example for border-end-start-radius in Percentage

border-end-start-radius: 50%;

index.html

</>

Copy

<!DOCTYPE html>
<html lang="en">
<head>
<style>
  .box {
    width: 200px;
    height: 200px;
    background-color: #4CAF50;
    border-end-start-radius: 50%;
  }
</style>
</head>
<body>

<div class="box"></div>

</body>
</html>

Browser Support

The border-end-start-radius property is supported in modern browsers. Below is a compatibility table:

Browser	Version
Chrome	89.0
Edge	89.0
Firefox	66.0
Safari	15.0
Opera	75.0

TutorialKart

CSS border-end-start-radius Property