CSS border-bottom-left-radius Property

CSS border-bottom-left-radius Property

The border-bottom-left-radius property in CSS is used to round the bottom-left corner of an element. It helps in creating smooth, curved corners instead of sharp edges.

1. Syntax

selector {
  border-bottom-left-radius: value;
}

Accepted Values:

Value	Description
length	Specifies the radius in px, em, rem, etc.
%	Defines the radius as a percentage of the element’s width/height.
inherit	Inherits the value from the parent element.

2. Example – Applying a Rounded Bottom-Left Corner

.box {
  width: 200px;
  height: 100px;
  background-color: lightblue;
  border: 2px solid blue;
  border-bottom-left-radius: 20px;
}

<div class="box">Rounded Bottom-Left Corner</div>

✅ The bottom-left corner will have a 20px radius, making it rounded.

3. Example – Using Percentage Values

.box {
  width: 200px;
  height: 100px;
  background-color: orange;
  border: 2px solid red;
  border-bottom-left-radius: 50%;
}

✅ The 50% radius creates a more exaggerated curve, depending on the element’s dimensions.

4. Example – Combining with Other Border-Radius Properties

You can use border-bottom-left-radius along with other corner radius properties to create unique shapes:

.box {
  width: 200px;
  height: 100px;
  background-color: green;
  border: 2px solid black;
  border-top-left-radius: 10px;
  border-top-right-radius: 30px;
  border-bottom-left-radius: 40px;
  border-bottom-right-radius: 0;
}

✅ Each corner will have a different curvature, creating a custom shape.

5. Example – Using border-radius Shorthand

Instead of defining each corner separately, you can use the border-radius shorthand:

.box {
  border-radius: 0 20px 40px 60px; /* top-left, top-right, bottom-right, bottom-left */
}

✅ This is equivalent to:

.box {
  border-top-left-radius: 0;
  border-top-right-radius: 20px;
  border-bottom-right-radius: 40px;
  border-bottom-left-radius: 60px;
}

6. Best Practices

✔ Use px for precise control and % for more fluid designs.
✔ Combine with other border-radius properties for custom shapes.
✔ Use border-radius shorthand for cleaner, more readable CSS.