CSS border-bottom-left-radius Property

Posted in CSS Tutorial

Updated on Oct 01, 2024

By Mari Selvan

👁️ 18 - Views

⏳ 4 mins

💬 1 Comment

Photo Credit to CodeToFun

🙋 Introduction

The border-bottom-left-radius property in CSS is used to define the rounding of the bottom-left corner of an element's border box.

This property is particularly useful when you want to create rounded corners for specific sides of an element without affecting the other corners.

It provides a flexible way to enhance the design of your web pages by controlling the curvature of the bottom-left corner independently.

💡 Syntax

The syntax for the border-bottom-left-radius property allows you to define the rounding of the corner using a single value (for a uniform radius) or two values (for elliptical radii).

Syntax

Copied

element {
  border-bottom-left-radius: length | percentage [ / length | percentage ];
}

length: A length value (e.g., 10px, 1em) that defines the radius.
percentage: A percentage value relative to the size of the element.

🎛️ Default Value

The default value of the border-bottom-left-radius property is 0. This means that, by default, the bottom-left corner of an element is not rounded.

🏠 Property Values

Value	Description
length	Specifies a fixed size for the radius, such as 10px, 2em, etc.
percentage	Specifies the radius as a percentage of the element's dimensions, such as 50%.
initial	Sets the property to its default value, which is 0.
inherit	Inherits the value from the parent element.

📄 Example

In this example, we'll create a box with a rounded bottom-left corner using the border-bottom-left-radius property.

index.html

Copied

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS border-bottom-left-radius Example</title>
  <style>
    .box {
      width: 200px;
      height: 200px;
      background-color: #3498db;
      border-bottom-left-radius: 30px;
    }
  </style>
</head>
<body>
  <h1>Box with Rounded Bottom-Left Corner</h1>
  <div class="box"></div>
</body>
</html>

🖥️ Browser Compatibility

The border-bottom-left-radius property is widely supported across all modern browsers, including Chrome, Firefox, Safari, Edge, and Opera. It is safe to use in most web projects, but as always, it is advisable to test your design across different browsers to ensure consistent behavior.

🎉 Conclusion

The border-bottom-left-radius property is a simple yet powerful tool in CSS that allows you to control the curvature of the bottom-left corner of an element. By applying this property, you can add subtle design touches to your website, enhancing its visual appeal and user experience. Experiment with different values to see how this property can be used to create unique and engaging designs.