CSS Border-Bottom-Left-Radius A Comprehensive Guide

Introduction

Welcome to our guide on the border-bottom-left-radius CSS property. This property allows you to round the bottom-left corner of an element, enhancing the visual appeal of your web pages. You can define the radius of the corner, creating circles or ellipses that add a nice touch to your design.

Specification

The border-bottom-left-radius CSS property is defined in the CSS Backgrounds and Borders Module Level 3. This specification ensures that your designs are consistent across different browsers and platforms.

Description

The border-bottom-left-radius property rounds the bottom-left corner of an HTML element. You can specify the radius (or dimensions) of the ellipse that defines the corner’s curvature. This property allows you to create rounded corners that can be either circles or ellipses, depending on the values you provide.

If you set a single value, it represents the radius of a circle. If you provide two values, they define the horizontal and vertical radii of an ellipse. You can also use percentage values, which are based on the dimensions of the element’s border box.

Note that a background (image or color) will be clipped at the border, including the rounded corners. The exact clipping location is determined by the background-clip property.

If the border-bottom-left-radius property is not set within a border-radius shorthand property applied later to the element, the value of border-bottom-left-radius will be reset to its initial value by the shorthand property.

This property is widely supported across modern browsers and can greatly enhance the visual appeal of your web designs by adding soft, rounded corners to elements.

Syntax

The border-bottom-left-radius property in CSS defines the curvature of the bottom-left corner of an element. The syntax is straightforward and can use various values, including lengths, percentages, and global keywords.

border-bottom-left-radius: length | length% | initial | inherit;

Single Value Syntax

• Single Length or Percentage: When a single value is provided, it defines the radius of a circle.

border-bottom-left-radius: 3px;

Double Value Syntax

• Two Lengths or Percentages: When two values are provided, they define the horizontal and vertical radii of an ellipse.

border-bottom-left-radius: 0.5em 1em;

Percentage Values

• Percentage Values: Percentages can also be used to define the radii. They are calculated based on the dimensions of the element’s border box.

border-bottom-left-radius: 20% 10%;

Global Values

• Global Keywords: The border-bottom-left-radius property also accepts global keywords like inherit, initial, revert, revert-layer, and unset.

border-bottom-left-radius: inherit;

Summary

• Single Value: border-bottom-left-radius: radius;
  • Denotes the radius of the circle to use for the border in that corner.
• Double Values: border-bottom-left-radius: horizontal vertical;
  • The first value is the horizontal semi-major axis.
  • The second value is the vertical semi-major axis.

Values

The border-bottom-left-radius CSS property accepts several types of values that define the rounding of the bottom-left corner of an element. These values can be lengths, percentages, or global keywords.

Length-Percentage

The <length-percentage> value denotes the size of the circle radius or the semi-major and semi-minor axes of the ellipse. This value can be expressed in any unit allowed by the CSS <length> data type or as a percentage.

• Absolute Lengths: These include units like px, em, rem, etc.

border-bottom-left-radius: 40px;

• Percentages: These values refer to the corresponding dimension of the border box.

border-bottom-left-radius: 20%;

Single Value

When a single value is provided, it denotes the radius of the circle to use for the border in that corner. This can be a length or a percentage.

• Length:

border-bottom-left-radius: 50px;

• Percentage:

border-bottom-left-radius: 50%;

Double Values

When two values are provided, the first value denotes the horizontal semi-major axis of the ellipse, and the second value denotes the vertical semi-major axis.

• Lengths:

border-bottom-left-radius: 40px 20px;

• Percentages:

border-bottom-left-radius: 20% 10%;

Global Values

The border-bottom-left-radius property also accepts global keywords that can be used to manage the inheritance and default values of the property.

• initial: Resets the property to its initial value (0).

border-bottom-left-radius: initial;

• inherit: Inherits the value from the parent element.

border-bottom-left-radius: inherit;

• revert: Resets the property to the value established by the user-agent stylesheet (if any).

border-bottom-left-radius: revert;

• revert-layer: Resets the property to the value established by the user-agent stylesheet (if any), considering the cascade layer.

border-bottom-left-radius: revert-layer;

• unset: Acts as inherit if the property naturally inherits, and as initial if it does not.

border-bottom-left-radius: unset;

Formal Definition

The border-bottom-left-radius CSS property is formally defined to accept values that specify the curvature of the bottom-left corner of an element. This property can take one or two values, which can be lengths or percentages, to define the shape of the corner.

Formal Syntax

border-bottom-left-radius = <length-percentage>[{1,2}]

Components

• <length-percentage>:

<length-percentage> = <length> | <percentage>

Initial Value

The initial value of the border-bottom-left-radius property is 0.

Applies To

This property applies to all elements, with the exception of table and inline-table elements when the border-collapse property is set to collapse. The behavior on internal table elements is currently undefined. It also applies to the ::first-letter pseudo-element.

Inherited

The border-bottom-left-radius property is not inherited.

Percentages

Percentage values refer to the corresponding dimension of the border box. For example, a horizontal percentage refers to the width of the box, and a vertical percentage refers to the height of the box.

Computed Value

The computed value of the border-bottom-left-radius property is two absolute <length> or <percentage> values.

Animation Type

The border-bottom-left-radius property animates as a <length>, <percentage>, or calc().

Formal Syntax Breakdown

• <length>: A dimension specified in units such as px, em, rem, etc.
• <percentage>: A value that references the dimensions of the element’s border box.

Examples

Arc of a Circle

A single <length> value produces an arc of a circle.

HTML:

<div class="circle"></div>

CSS:

.circle {
  border-bottom-left-radius: 40px;
  background-color: lightgreen;
  border: solid 1px black;
  width: 100px;
  height: 100px;
}

Arc of an Ellipse

Two different <length> values produce an arc of an ellipse.

HTML:

<div class="ellipse"></div>

CSS:

.ellipse {
  border-bottom-left-radius: 40px 20px;
  background-color: lightgreen;
  border: solid 1px black;
  width: 100px;
  height: 100px;
}

Square Element with Percentage Radius

A square element with a single <percentage> value produces an arc of a circle.

HTML:

<div class="square-percentage"></div>

CSS:

.square-percentage {
  border-bottom-left-radius: 40%;
  background-color: lightgreen;
  border: solid 1px black;
  width: 100px;
  height: 100px;
}

Non-Square Element with Percentage Radius

A non-square element with a single <percentage> value produces an arc of an ellipse.

HTML:

<div class="non-square-percentage"></div>

CSS:

.non-square-percentage {
  border-bottom-left-radius: 40%;
  background-color: lightgreen;
  border: solid 1px black;
  width: 200px;
  height: 100px;
}

Using Global Keywords

HTML:

<div class="inherit"></div>
<div class="initial"></div>

CSS:

.inherit {
  border-bottom-left-radius: inherit;
  background-color: lightgreen;
  border: solid 1px black;
  width: 100px;
  height: 100px;
}

.initial {
  border-bottom-left-radius: initial;
  background-color: lightgreen;
  border: solid 1px black;
  width: 100px;
  height: 100px;
}

Browser Compatibility

The border-bottom-left-radius property is widely supported across modern browsers. Here’s an overview:

Desktop Browsers

• Google Chrome: Supported since version 5.0.
• Mozilla Firefox: Supported since version 4.0.
• Internet Explorer/Microsoft Edge: Supported since Internet Explorer 9.0. Microsoft Edge has supported it since its initial release.
• Opera: Supported since version 10.5.
• Safari: Supported since version 5.0.

Mobile Browsers

• Android Browser: Supported since version 2.1.
• iOS Safari: Supported since iOS 3.2.
• Opera Mobile: Supported since version 10.
• Chrome for Android: Supported since version 18.
• Firefox for Android: Supported since version 4.

Notes on Compatibility

• Vendor Prefixes: In older browsers, you might need vendor prefixes (e.g., -webkit-, -moz-, -o-). Modern browsers don’t require these.
• Edge Cases: While generally well-supported, there might be inconsistencies in older browser versions. Always test your designs on multiple browsers.

Example of Cross-Browser Compatibility

To ensure compatibility, use:

.rounded-corner {
  border-bottom-left-radius: 20px;
  -webkit-border-bottom-left-radius: 20px; /* For older WebKit browsers */
  -moz-border-bottom-left-radius: 20px;    /* For older Firefox browsers */
}

Conclusion

The border-bottom-left-radius property is a reliable and widely supported CSS feature for creating rounded corners. By understanding its compatibility, you can confidently use it to enhance your web designs.

For the latest compatibility info, check resources like Can I Use or MDN Web Docs.

See Also

• border-radius: Sets the radius of all four corners in one declaration.
• border-top-right-radius: Sets the radius of the top-right corner.
• border-bottom-right-radius: Sets the radius of the bottom-right corner.
• border-top-left-radius: Sets the radius of the top-left corner.
• background-clip: Determines the background’s extent into the border-box, padding-box, or content-box.
• CSS Borders and Backgrounds Module Level 3: Official specification for border-related properties.

Additional Resources

• MDN Web Docs: Comprehensive resource for CSS.
• Can I Use: Up-to-date browser compatibility info.
• CSS Tricks: Blog and community for CSS techniques.

Related Tutorials

• CSS Borders and Backgrounds Tutorial: Guide to using borders and backgrounds in CSS.
• CSS Shapes and Clipping: Overview of CSS properties for complex shapes and clipping.

These resources will help you understand and use CSS borders and backgrounds effectively.