CSS3 `border-bottom-left-radius` Property

Example

Add a rounded border to the bottom-left corner of a div element:

Browser Support

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

Numbers followed by -webkit-, -ms-, or -moz- specify the first version that worked with a prefix.

Property	Chrome	Firefox	Safari	Opera
border-radius	9.0	5.0 <br>4.0 -webkit-	4.0 <br>3.0 -moz-	5.0 <br>3.1 -webkit-	10.5

Property Definition and Usage

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

Tip: This property allows you to add rounded borders to elements!

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

Syntax

Note: If you set two values, the first is for the bottom border, and the second is for the left border. If the second value is omitted, it is copied from the first. When one of the values is 0, the corner is not rounded, resulting in a sharp corner.

/* Circle */
/* border-bottom-left-radius: radius */
border-bottom-left-radius: 3px;

/* Ellipse */
/* border-bottom-left-radius: horizontal vertical */
border-bottom-left-radius: 0.5em 1em;

border-bottom-left-radius: inherit;

Value	Description
length	Defines the shape of the bottom-left corner.
%	Defines the shape of the bottom-left corner using percentage.

CSS3 Tutorial: CSS3 Borders

❮ Pr Clip Path Pr Pos Z Index ❯

CSS3 border-bottom-left-radius Property

Example

Browser Support

Property Definition and Usage

Syntax

Related Articles

CSS3 `border-bottom-left-radius` Property