CSS border-start-end-radius Property

Definition and Usage

The border-start-end-radius property rounds the logical corner where the block-start edge meets the inline-end edge. Which physical corner that is depends on writing-mode, direction, and text-orientation.

In the common horizontal-tb + LTR setup, it maps to border-top-right-radius. In RTL, the same rule usually maps to the top-left corner. The initial value is 0. It is not inherited.

CSS Syntax

One value makes a circular corner. Two values make an elliptical corner. Negative values are invalid.

Property Values

How to Use border-start-end-radius

Round the logical start-end corner when the physical corner may change with language or writing mode.

1. Give the box a visible background or border so the curve is clear.
2. Set border-start-end-radius to a length, a percentage, or two values.
3. Keep the same rule for LTR and RTL. Change direction only if you need to test the mapping.
4. Use border-top-right-radius only when you truly need a fixed physical corner.

Live Preview

Change the radius, then flip direction to see the logical corner move.

CSS Examples

Each snippet focuses on border-start-end-radius. Use Try It Yourself for a live editor.

<style>
  div {
    width: 120px;
    height: 120px;
    background: #2563eb;
    border-start-end-radius: 20px;
  }
</style>

<div></div>

<style>
  div {
    direction: rtl;
    width: 120px;
    height: 120px;
    background: #2563eb;
    border-start-end-radius: 40px;
  }
</style>

<div></div>

<style>
  div {
    width: 160px;
    height: 100px;
    background: #0f766e;
    border-start-end-radius: 40px 20px;
  }
</style>

<div></div>

Key Takeaways