CSS border-bottom-left-radius Property

Description

The border-bottom-left-radius is a CSS property that allows you to control the curvature of the bottom-left corner of an element with a border. It defines the radius of the quarter circle that is used to round off this specific corner, creating a smooth and visually appealing design effect. You can specify a single value to create a uniform curve or two values to control the horizontal and vertical radii independently, giving you precise control over the corner's shape. This property is commonly used in conjunction with other border-radius properties to create various rounded corner effects in web design, enhancing the aesthetics and usability of elements like buttons, containers, and images.

Initial value: 0
Applies to: All elements
Inherited: No
Computed value: Two absolute [length] or percentages
Animatable: Yes
JavaScript syntax: object.style.borderBottomLeftRadius

Interactive Demo

border-bottom-left-radius: 30px;

border-bottom-left-radius: 20%;

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

border-bottom-left-radius: 30px 60px;

Demo of the border bottom left radius property.

Syntax

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

Values

<length>Denotes the size of the circle radius or the semi-major and semi-minor axes of the ellipsis. It can be expressed in any unit allowed by the CSS <length> data types. Negative values are invalid.
<percentage>Denotes the size of the circle radius, or the semi-major and semi-minor axes of the ellipsis, using percentage values. Percentages for the horizontal axe refer to the width of the box, percentages for the vertical axe refer to the height of the box. Negative values are invalid.

Example

HTML

<div class="border">This is an example of the border-bottom-left-radius property using a red solid border 2px in width and a 10px radius.</div>

CSS

.border {
   border: 2px solid red;
   border-bottom-left-radius: 10px;
   margin: 20px;
   padding: 20px;
}

Result

Editor

Browser Support

The following table will show you the current browser support for the CSS border-bottom-left-radius property.

Desktop

12	4	4	10.5	5

Tablets / Mobile

18	4	11	4.2	1	37

Last updated by CSSPortal on: 31st December 2023

Support Us