CSS border-end-end-radius A Guide to Logical Border Radii

Learn about the CSS border-end-end-radius property.

Use it to create rounded corners that adapt to writing modes and directions.

Define radii using length values or percentages.

Introduction

The border-end-end-radius property in CSS is a handy tool for web developers. It lets you define a border radius that adapts to the element’s writing mode, direction, and text orientation. This makes it great for creating designs that work well across different languages and text directions. Since September 2021, it’s been well-supported by browsers, ensuring your designs look consistent across devices.

Specification

The border-end-end-radius property is part of the CSS Logical Properties and Values Level 1 specification. This spec aims to provide logical properties that adapt to various writing modes and text directions, ensuring your styles stay consistent.

Description

The border-end-end-radius property creates rounded corners at the end of an element’s border. It adjusts based on the element’s writing mode, direction, and text orientation. For example, in a left-to-right (ltr) horizontal writing mode, it corresponds to the border-bottom-right-radius. This makes it perfect for creating adaptable designs.

Syntax

Using the border-end-end-radius property is simple. You can define the radius using length values or percentages:

/* <length> values */
/* With one value, the corner will be a circle */
border-end-end-radius: 10px;
border-end-end-radius: 1em;

/* With two values, the corner will be an ellipse */
border-end-end-radius: 1em 2em;

/* Global values */
border-end-end-radius: inherit;
border-end-end-radius: initial;
border-end-end-radius: revert;
border-end-end-radius: revert-layer;
border-end-end-radius: unset;

Values

The border-end-end-radius property accepts the following values:

<length-percentage>: This defines the size of the circle radius or the semi-major and semi-minor axes of the ellipse. You can use any length unit, and percentages refer to the width or height of the box. Negative values are not allowed.

Formal Definition

Here’s the formal definition of the border-end-end-radius property:

Formal Syntax

The formal syntax for the border-end-end-radius property is:

border-end-end-radius =
  <length-percentage [0,∞]>{1,2}

<length-percentage> =
  <length> | <percentage>

This syntax allows for one or two values, which can be lengths or percentages. One value creates a circular radius, while two values create an elliptical radius.

Examples

Here are some practical examples of using the border-end-end-radius property:

Basic Usage

Create a simple div with a specified border-end-end-radius.

HTML:

<!DOCTYPE html>
<html>
<head>
  <title>CSS | border-end-end-radius Property</title>
  <style>
    h1 {
      color: green;
    }
    div {
      background-color: purple;
      width: 250px;
      height: 50px;
    }
    .one {
      background-color: yellow;
      border-end-end-radius: 10px;
    }
  </style>
</head>
<body>
  <center>
    <h1>Website</h1>
    <b>CSS | border-end-end-radius Property</b>
    <br><br>
    <div>
      <p class="one">A Computer Science Portal</p>
    </div>
  </center>
</body>
</html>

Percentage Value

Use a percentage value for the border-end-end-radius.

HTML:

<!DOCTYPE html>
<html>
<head>
  <title>CSS | border-end-end-radius Property</title>
  <style>
    h1 {
      color: green;
    }
    div {
      background-color: purple;
      width: 250px;
      height: 50px;
    }
    .one {
      background-color: yellow;
      border-end-end-radius: 50%;
    }
  </style>
</head>
<body>
  <center>
    <h1>Website</h1>
    <b>CSS | border-end-end-radius Property</b>
    <br><br>
    <div>
      <p class="one">A Computer Science Portal</p>
    </div>
  </center>
</body>
</html>

Vertical Text

See how the border-end-end-radius property adapts to vertical text.

HTML:

<div>
  <p class="exampleText">Example</p>
</div>

CSS:

div {
  background-color: rebeccapurple;
  width: 120px;
  height: 120px;
  border-end-end-radius: 10px;
}

.exampleText {
  writing-mode: vertical-rl;
  padding: 10px;
  background-color: #fff;
  border-end-end-radius: 10px;
}

Specifications

The border-end-end-radius property is defined in the CSS Logical Properties and Values Level 1 specification. This spec introduces logical properties that adapt to writing modes and text directions, ensuring consistent styling.

Browser Compatibility

The border-end-end-radius property is widely supported across modern browsers:

Firefox: Full support
Chrome: Full support
Safari: Full support
Edge: Full support
Opera: Full support

For the most up-to-date information, check the Browser Compatibility Data (BCD) tables on MDN Web Docs.

CSS Logical Properties and Values: Learn more about logical properties and values in CSS.
border-bottom-right-radius: The physical counterpart to border-end-end-radius in a horizontal writing mode with left-to-right (ltr) direction.
writing-mode: Understand how the writing-mode property affects text layout.
direction: Learn about the direction property, which defines text direction.
text-orientation: Explore the text-orientation property, which controls text orientation within a line box.

These resources help you grasp how the border-end-end-radius property works within the larger context of CSS logical properties and values, aiding in creating flexible and inclusive web designs.