CSS border-end-end-radius Property

CSS border-end-end-radius

The border-end-end-radius property in CSS defines the rounded corner radius for the block-end and inline-end corner of an element, depending on the writing mode, directionality, and text orientation. This property allows you to control the smoothness and curvature of the specified corner individually.

Syntax of border-end-end-radius

</>

Copy

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

Values

Value	Description
`0`	Sets the radius of the corner to zero, creating a sharp edge.
`length`	Defines the radius of the corner in 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 (no rounding)

Examples for border-end-end-radius

Using the CSS border-end-end-radius Property

The following examples demonstrate how to use the border-end-end-radius property to create rounded corners at the block-end and inline-end of an element.

</>

Copy

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

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

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

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

Example for Rounded End-End Corner

Below is an example demonstrating how to use border-end-end-radius: 30px to create a rounded end-end corner:

index.html

</>

Copy

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

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

</body>
</html>

Example for border-end-end-radius in Percentage

border-end-end-radius: 50%;

index.html

</>

Copy

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

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

</body>
</html>

Browser Support

The border-end-end-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-end-radius Property