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

Introduction

The border-end-start-radius property in CSS is used to define the border radius at the end-start corner of an element. This corner is determined by the element’s writing mode, direction, and text orientation. The property is particularly useful for creating responsive and flexible designs that adapt to different text directions and languages.

Definition and Usage

The border-end-start-radius property specifies the border radius at the end-start corner of an element. This property is part of the CSS Logical Properties and Values Level 1 specification. By using border-end-start-radius, you can ensure that the border radius adapts to the element’s writing mode, direction, and text orientation, creating a consistent and visually appealing design.

Syntax

The syntax for the border-end-start-radius property is straightforward and supports various values to create either circular or elliptical corners.

border-end-start-radius: <length> | <percentage>;

Single Value Syntax

When a single value is provided, it applies to both the horizontal and vertical radii, creating a circular corner.

border-end-start-radius: 10px;
border-end-start-radius: 1em;

Double Value Syntax

When two values are provided, they define the horizontal and vertical radii respectively, creating an elliptical corner.

border-end-start-radius: 1em 2em;

Global Values

The property also supports global values, which are common across many CSS properties:

border-end-start-radius: inherit;
border-end-start-radius: initial;
border-end-start-radius: revert;
border-end-start-radius: revert-layer;
border-end-start-radius: unset;

Values

The border-end-start-radius property accepts various values to define the radius of the border at the end-start corner of an element. These values can be specified in lengths or percentages, allowing you to create both circular and elliptical corners.

Length Values

Length values define the radius in specific units. You can use any unit supported by the CSS <length> data type, such as pixels (px), ems (em), rems (rem), and others.

• Single Length Value: When a single length value is provided, it applies to both the horizontal and vertical radii, creating a circular corner.

  border-end-start-radius: 10px;
  border-end-start-radius: 1em;

• Double Length Values: When two length values are provided, they define the horizontal and vertical radii respectively, creating an elliptical corner.

  border-end-start-radius: 1em 2em;

Percentage Values

Percentage values specify the radius as a percentage of the corresponding dimension of the border box. Percentages for the horizontal axis refer to the width of the box, while percentages for the vertical axis refer to the height of the box.

• Single Percentage Value: Applies the same percentage to both the horizontal and vertical radii.

  border-end-start-radius: 50%;

• Double Percentage Values: Defines the horizontal and vertical radii as separate percentages.

  border-end-start-radius: 25% 50%;

Global Values

• inherit: Inherits the value from the parent element.

  border-end-start-radius: inherit;

• initial: Sets the property to its initial value (0).

  border-end-start-radius: initial;

• revert: Reverts the property to the user agent’s default style.

  border-end-start-radius: revert;

• revert-layer: Reverts the property to the value of the next outer CSS cascade layer.

  border-end-start-radius: revert-layer;

• unset: Resets the property to its natural value, which means it behaves as though the property is not set.

  border-end-start-radius: unset;

Formal Definition

The border-end-start-radius property is formally defined to specify the border radius at the end-start corner of an element.

• Initial Value: 0
• Applies To: All elements; but not required for table and inline-table when border-collapse is collapse. Applies to ::first-letter.
• Inherited: No
• Percentages: Refer to the corresponding dimension of the border box
• Computed Value: Two absolute lengths or percentages
• Animation Type: Length, percentage, or calc()

Formal Syntax

The formal syntax for the border-end-start-radius property is defined as follows:

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

• <length-percentage>: This can be either a <length> or a <percentage>.
  • <length>: Represents a fixed length value in any CSS length unit, such as px, em, rem, etc.
  • <percentage>: Represents a percentage value relative to the corresponding dimension of the border box. Percentages for the horizontal axis refer to the width of the box, while percentages for the vertical axis refer to the height of the box.
• {1,2}: Indicates that one or two values can be specified. If one value is provided, it applies to both the horizontal and vertical radii, creating a circular corner. If two values are provided, they define the horizontal and vertical radii respectively, creating an elliptical corner.

Examples

Circular Corner

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

Elliptical Corner

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

Vertical Text with Border Radius

HTML:

<div class="example-3">
  <p class="vertical-text">Example</p>
</div>

CSS:

.example-3 {
  background-color: rebeccapurple;
  width: 120px;
  height: 120px;
  border-end-start-radius: 10px;
}

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

Percentage Values

HTML:

<div class="example-4">
  <p>Example Text</p>
</div>

CSS:

.example-4 {
  background-color: rebeccapurple;
  width: 120px;
  height: 120px;
  border-end-start-radius: 50%;
}

Specifications

The border-end-start-radius property is part of the CSS Logical Properties and Values Level 1 specification.

CSS Logical Properties and Values Level 1

• Specification: CSS Logical Properties and Values Level 1

Browser Compatibility

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

• Google Chrome: 89+
• Microsoft Edge: 89+
• Mozilla Firefox: 66+
• Opera: 75+
• Safari: 15+
• Internet Explorer: Not supported

See Also

Related CSS Properties

• CSS Logical Properties and Values: CSS Logical Properties and Values
• Mapped Physical Property: border-top-right-radius
• Writing Mode: writing-mode
• Direction: direction
• Text Orientation: text-orientation

Additional Resources

• MDN Web Docs: MDN Web Docs
• CSS Tricks: CSS Tricks
• W3C Specifications: W3C Specifications

Learning Resources

• FreeCodeCamp: FreeCodeCamp
• Codecademy: Codecademy