CSS border-bottom-left-radius Property

What You’ll Learn

The border-bottom-left-radius property rounds the bottom-left corner of an element. It is useful when you want one curved corner without affecting the other three.

Definition and Usage

The border-bottom-left-radius CSS property defines the rounding of the bottom-left corner of an element’s border box. This property is particularly useful when you want rounded corners on specific sides without affecting the other corners.

By customizing just the bottom-left corner, you can create subtle design touches such as angled cards, speech bubbles, tab shapes, and asymmetric layouts that feel more dynamic than fully square boxes.

📝 Syntax

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

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

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

Basic Example

.box {
  width: 200px;
  height: 200px;
  background-color: #3498db;
  border-bottom-left-radius: 30px;
}

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 bottom-left 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.
• It works on elements with or without visible borders.

Default Value

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

💎 Property Values

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

Common Value Types

Physical Bottom-Left Corner

border-bottom-left-radius always rounds the visual bottom-left corner of an element, even when writing mode changes. For writing-mode-aware corner rounding, consider border-end-start-radius instead.

border-bottom-left-radius vs related properties

Examples Gallery

Try border-bottom-left-radius with fixed lengths, percentages, elliptical corners, and bordered cards.

<style>
  .box {
    width: 200px;
    height: 200px;
    background-color: #3498db;
    border-bottom-left-radius: 30px;
  }
</style>

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

.badge {
  width: 8rem;
  height: 4rem;
  background: #7c3aed;
  border-bottom-left-radius: 50%;
}

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

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

💡 Best Practices