CSS border-start-start-radius Property

What You’ll Learn

The border-start-start-radius property rounds the logical start-start corner of an element — where the block-start edge meets the inline-start edge. It is ideal for layouts that must work in both LTR and RTL text directions.

Definition and Usage

The border-start-start-radius CSS property controls the rounding of the logical start-start corner of an element’s border box. This corner sits at the intersection of the block-start side and the inline-start side.

In standard left-to-right horizontal writing, start-start usually maps to the top-left corner. In right-to-left layouts, the same property rounds the top-right corner instead — without changing your CSS. That makes it especially useful for multilingual and bidirectional designs.

📝 Syntax

The syntax for border-start-start-radius lets you use one value for a circular corner or two values for an elliptical corner:

selector {
  border-start-start-radius: <length> | <percentage>;
}

/* elliptical corner */
selector {
  border-start-start-radius: <horizontal> / <vertical>;
}

Basic Example

.box {
  width: 200px;
  height: 100px;
  background-color: lightcoral;
  border: 2px solid #333;
  border-start-start-radius: 20px;
}

A length value such as 10px or 1em sets a fixed curve. A percentage is relative to the element’s width and height.

Syntax Rules

• This property affects only the logical start-start corner.
• The default value is 0, which means a square corner.
• One value creates a circular corner radius on both axes.
• Two values separated by / create an elliptical corner.
• The mapped physical corner changes with direction and writing-mode.

Default Value

The default value of border-start-start-radius is 0. That means the start-start corner is not rounded unless you set a radius value.

💎 Property Values

border-start-start-radius accepts length, percentage, and elliptical values.

Common Value Types

Logical Start-Start Corner and Writing Modes

border-start-start-radius follows the inline and block axes instead of fixed top, right, bottom, and left sides. In horizontal LTR text, start-start is usually the top-left corner. In RTL, the same rule rounds the top-right corner.

border-start-start-radius vs related properties

Examples Gallery

Try border-start-start-radius with fixed lengths, percentages, elliptical corners, and RTL-friendly cards.

<style>
  .box {
    width: 200px;
    height: 100px;
    background-color: lightcoral;
    border: 2px solid #333;
    border-start-start-radius: 20px;
  }
</style>

<div class="box"></div>

.box {
  width: 200px;
  height: 200px;
  background-color: lightcoral;
  border-start-start-radius: 50%;
}

.panel {
  width: 14rem;
  height: 5rem;
  background: #059669;
  border-start-start-radius: 40px / 10px;
}

.card {
  border: 2px solid #cbd5e1;
  padding: 1rem;
  background: #fff;
  border-start-start-radius: 1.5rem;
  max-width: 16rem;
}

[dir="rtl"] .card {
  text-align: right;
}

💡 Best Practices