CSS border-bottom-left-radius attribute

Definition and usage

The border-bottom-left-radius property defines the shape of the lower left corner border.

Tip:This property allows you to add rounded border corners to the element.

See also:

CSS3 Tutorial:CSS3 Borders

Example

Add rounded border corners to the lower left corner of the div element:

div
{
border:2px solid;
border-bottom-left-radius:2em;
}

Try it yourself

CSS syntax

border-bottom-left-radius: length|% [length|%];

Note:The length value and percentage value of the border-bottom-left-radius property define the radius (radii) of a quarter ellipse (defining the shape of the corner of the external border edge). The first value is the horizontal radius, and the second value is the vertical radius. If the second value is omitted, the first value is copied. If the length is zero, the corner is square rather than round. The percentage value of the horizontal radius refers to the width of the border box, and the percentage value of the vertical radius refers to the height of the border box.

Property value

Value Description Test
length Define the shape of the lower left corner. Test
% Define the shape of the lower left corner with percentage values. Test

Technical details

Default value: 0
Inheritance: no
Version: CSS3
JavaScript syntax: object.style.borderBottomLeftRadius="5px"

Browser support

The numbers in the table indicate the first browser version that fully supports this property.

Numbers with -webkit- or -moz- prefixes indicate the first version using the prefix.

Chrome IE / Edge Firefox Safari Opera
5.0
4.0 -webkit-		 9.0 4.0
3.0 -moz-		 5.0
3.1 -webkit-		 10.5