rick@tillitsdone.com

+66824564755

Scroll to discover

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.

CSS Blogs

CSS3 is the latest version of Cascading Style Sheets, offering advanced styling features like animations, transitions, shadows, gradients, and responsive design.

CSS property CSS animation

css_property_cover/css-property-border-bottom-left-radius.png

CSS Border-Bottom-Left-Radius A Comprehensive Guide Learn about the CSS border-bottom-left-radius property. Discover how to round the bottom-left corner of elements with lengths or percentages. Explore available options and examples.

css_property_cover/css-property-border-inline.png

CSS Border-Inline Enhance Web Design with Logical Borders Learn how to use CSS border-inline to simplify the styling of inline borders based on writing mode and direction. Explore width, style, and color options.

css_property_cover/css-property-border-top-right-radius.png

CSS Border-Top-Right-Radius Round Corners Easily Learn how to use the CSS border-top-right-radius property to round the top-right corner of elements. Options include length and percentage values for circular or elliptical corners.

css_property_cover/css-property-border-inline-end-style.png

CSS border-inline-end-style Customize Borders Learn about the css border-inline-end-style property. Customize the style of the logical inline end border of an element. Options include dashed, dotted, solid, and more.

css_property_cover/css-property-border-start-end-radius.png

CSS border-start-end-radius A Guide for Web Developers Learn about the CSS border-start-end-radius property, its use cases, and available options. This property allows you to define a logical border radius that adapts to different writing modes and text orientations.

css_property_cover/css-property-background-size.png

CSS Background-Size Control Image Scaling Learn how to use the CSS background-size property to control the scaling of background images. Discover options like cover, contain, and custom dimensions. Enhance your web design with responsive background images.

View all 337 CSS blogs

Talk with CEO

Ready to bring your web/app to life or boost your team with expert Thai developers?

Contact us today to discuss your needs, and let’s create tailored solutions to achieve your goals. We’re here to help at every step!

🖐️ Contact us

Explore our best articles, cover a wide variety of technologies

Our knowledge base

UI toolkit for building natively compiled applications for mobile, web, and desktop from a single codebase.

150 Articles

Explore

Nodejs

JavaScript runtime for building scalable, high-performance server-side applications.

60 Articles

Explore

Nextjs

React framework enabling server-side rendering and static site generation for optimized performance.

40 Articles

Explore

Typescript

Superset of JavaScript adding static types for improved code quality and maintainability.

39 Articles

Explore

TailwindCSS

Utility-first CSS framework for rapid UI development.

130 Articles

Explore

Golang

Programming language known for its simplicity, concurrency model, and performance.

70 Articles

Explore

AstroJs

Astro is an all-in-one web framework. It includes everything you need to create a website, built-in.

40 Articles

Explore

Jest

Versatile testing framework for JavaScript applications supporting various test types.

337 Articles

Explore

CSS

CSS3 is the latest version of Cascading Style Sheets, offering advanced styling features like animations, transitions, shadows, gradients, and responsive design.

Let's keep in Touch

Thank you for your interest in Tillitsdone! Whether you have a question about our services, want to discuss a potential project, or simply want to say hello, we're here and ready to assist you.
We'll be right here with you every step of the way.

Contact Information

rick@tillitsdone.com+66824564755

Find All the Ways to Get in Touch with Tillitsdone - We're Just a Click, Call, or Message Away. We'll Be Right Here, Ready to Respond and Start a Conversation About Your Needs.

Address

9 Phahonyothin Rd, Khlong Nueng, Khlong Luang District, Pathum Thani, Bangkok Thailand

Visit Tillitsdone at Our Physical Location - We'd Love to Welcome You to Our Creative Space. We'll Be Right Here, Ready to Show You Around and Discuss Your Ideas in Person.

Social media

Facebook Instagram LinkedIn

Connect with Tillitsdone on Various Social Platforms - Stay Updated and Engage with Our Latest Projects and Insights. We'll Be Right Here, Sharing Our Journey and Ready to Interact with You.

We anticipate your communication and look forward to discussing how we can contribute to your business's success.
We'll be here, prepared to commence this promising collaboration.