CSS border-top-left-radius Property

What You’ll Learn

The border-top-left-radius property rounds the physical top-left corner of an element. It is a corner longhand of border-radius — ideal when you want one custom corner without affecting the other three.

Definition and Usage

The border-top-left-radius CSS property controls the rounding of the physical top-left corner of an element’s border box. It is one of four corner longhands that let you style each corner individually.

Unlike logical properties such as border-start-start-radius, border-top-left-radius always targets the top-left corner — even in RTL or vertical writing modes. That makes it straightforward for tab shapes, asymmetric cards, and one-off design accents.

📝 Syntax

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

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

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

Basic Example

.box {
  width: 200px;
  height: 200px;
  background-color: lightblue;
  border-top-left-radius: 50px;
}

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 physical top-left corner.
• The default value is 0, which means a square corner.
• One value creates a circular corner radius on both axes.
• Two values set horizontal and vertical radii separately, such as 10px 20px.
• The mapped physical corner does not change with direction or writing-mode.

Default Value

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

💎 Property Values

border-top-left-radius accepts length, percentage, and elliptical values.

Common Value Types

Top-Left Corner and Writing Modes

border-top-left-radius always rounds the physical top-left corner. Text direction and vertical writing modes do not move the curve — compare with border-start-start-radius when the rounded corner should follow the writing mode.

border-top-left-radius vs related properties

Examples Gallery

Try border-top-left-radius with fixed lengths, percentages, elliptical corners, and tab-style cards.

<style>
  .box {
    width: 200px;
    height: 200px;
    background-color: lightblue;
    border-top-left-radius: 50px;
  }
</style>

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

.box {
  width: 200px;
  height: 200px;
  background-color: lightblue;
  border-top-left-radius: 50%;
}

.panel {
  width: 14rem;
  height: 5rem;
  background: #059669;
  border-top-left-radius: 10px 20px;
}

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

💡 Best Practices