CSS border-end-end-radius Property

Definition and Usage

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

In the common case — horizontal-tb with left-to-right text — it matches border-bottom-right-radius. Use the logical property when the same rule should stay correct in RTL or vertical layouts. It is not inherited. The initial value is 0.

CSS Syntax

One value makes a circular corner. Two values make an ellipse (horizontal radius, then vertical). Negative values are invalid.

Property Values

How to Use border-end-end-radius

Round only the logical end-end corner, then check how direction changes which physical corner moves.

1. Pick the element whose end-end corner should curve.
2. Give it a background or border so the curve is visible.
3. Set border-end-end-radius to a length or percentage.
4. If the page may be RTL or vertical, prefer this logical property over border-bottom-right-radius.

Live Preview

Change the radius on the logical end-end corner. In left-to-right text, that is the bottom-right corner.

CSS Examples

Each snippet focuses on border-end-end-radius. Extra CSS is only there so the corner is easy to see. Use Try It Yourself for a live editor.

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

<div></div>

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

<div></div>

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

<div></div>

Key Takeaways