CSS border-start-start-radius Property

Definition and Usage

The border-start-start-radius property rounds the corner where the block-start and inline-start sides meet. The physical corner it maps to depends on writing-mode and direction.

In horizontal-tb with left-to-right text, it matches border-top-left-radius. In RTL, the same declaration rounds the top-right corner instead — without rewriting your CSS.

CSS Syntax

One value makes a circular arc. Two values set horizontal then vertical radii for an ellipse. Negative values are invalid. Initial value is 0.

Property Values

How to Use border-start-start-radius

Round one logical corner so the curve follows text direction instead of a fixed physical corner.

1. Choose the element that should have a rounded start-start corner.
2. Set border-start-start-radius with a length, percentage, or two values.
3. Give the box a visible background or border so the curve is easy to see.
4. Rely on direction and writing-mode — do not hard-code top-left when the layout must flip.

Live Preview

Change the radius and the text direction. Watch which physical corner rounds.

CSS Examples

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

<style>
  div {
    width: 200px;
    height: 100px;
    background: #2563eb;
    border: 2px solid #1e3a8a;
    border-start-start-radius: 24px;
  }
</style>

<div>Start-start</div>

<style>
  div {
    width: 220px;
    height: 80px;
    background: #0f766e;
    border: 2px solid #115e59;
    border-start-start-radius: 40px 12px;
  }
</style>

<div>Ellipse</div>

<style>
  .box {
    width: 160px;
    height: 80px;
    background: #2563eb;
    border: 2px solid #1e3a8a;
    border-start-start-radius: 28px;
  }
</style>

<div class="box">LTR</div>
<div class="box" dir="rtl">RTL</div>

Key Takeaways