CSS3 border-bottom-left-radiusProperty


Example

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

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

Try it Yourself »

Browser Support

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

Numbers immediately preceding -webkit-, -ms-, or -moz- are the first browser version numbers that support the prefixed property.

Property
border-radius 9.0 5.0
4.0 -webkit-		 4.0
3.0 -moz-		 5.0
3.1 -webkit-		 10.5

Property definition and usage instructions

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

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

Default Value: 0
Inherited: no
version: CSS3
JavaScript Syntax: object object.style.borderBottomRightRadius="5px"

Syntax

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

Note:Note: If you set two values, the first is used for the bottom border and the second for the left border. If the second value is omitted, it is copied from the first value. When one of the values is 0, the rounded corner will not be set, and that corner will be displayed as a right angle.

/* 圆形 */
/* border-bottom-left-radius: radius */
border-bottom-left-radius: 3px;

/* 椭圆形 */
/* border-bottom-left-radius: 水平方向 垂直方向 */
border-bottom-left-radius: 0.5em 1em;

border-bottom-left-radius: inherit;
Value Description
length Defines the shape of the bottom-right corner.
% Use % to define the shape of the bottom-right corner.

Related Articles

CSS3 Tutorial:CSS3 Border

other extensions