border-bottom-left-radius

Summary

Defines the shape of the border of the bottom-left corner.

Overview table

Initial value

0

Applies to

All elements

Inherited

No

Media

visual

Computed value

two absolute <length> or percentages

Animatable

Yes

CSS Object Model Property

borderBottomLeftRadius

Syntax

• border-bottom-left-radius: length
• border-bottom-left-radius: percentage

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 axis refer to the width of the box, percentages for the vertical axis refer to the height of the box. Negative values are invalid.

Examples

One value example to use an arc of circle as the border on the top left corner.

border-bottom-left-radius: 10px;

/* is equivalent to: */
border-bottom-left-radius: 10px 10px;

Two value example to use an arc of ellipse as the border on the top left corner.

border-bottom-left-radius: 10px 5px;

One value percentage example on the top left corner. If the box is a square an arc of circle is used as the border, if the box is not a square an arc of ellipse is used as the border.

border-bottom-left-radius: 30%;

Notes

Remarks

The border-bottom-left-radius property specifies the horizontal and vertical radii of the ellipse that defines the rounded lower-left corner of a border box. If there is only one value given, then that value specifies both horizontal and vertical radii of the ellipse. If there are two values given, then the first value sets the horizontal radius and the second value sets the vertical radius.

Related specifications

CSS Backgrounds and Borders Module Level 3: Rounded Corners:

Candidate Recommendation

See also

Related articles

Border

• border

• border-bottom

• border-bottom-color

• border-bottom-left-radius

• border-bottom-style

• border-bottom-width

• border-color

• border-image

• border-image-outset

• border-image-repeat

• border-image-slice

• border-image-source

• border-image-width

• border-left

• border-left-color

• border-left-style

• border-left-width

• border-radius

• border-right

• border-right-color

• border-right-style

• border-right-width

• border-top

• border-top-color

• border-top-left-radius

• border-top-right-radius

• border-top-style

• border-top-width

• border-width

Related pages

• CSSStyleDeclarationCSSStyleDeclaration
• currentStylecurrentStyle
• stylestyle
• defaultsdefaults
• runtimeStyleruntimeStyle
• Reference
• border-radiusborder-radius
• border-top-left-radiusborder-top-left-radius
• border-top-right-radiusborder-top-right-radius
• border-bottom-right-radiusborder-bottom-right-radius

Attributions

• Mozilla Developer Network : [Border-bottom-left-radius Article]

• Microsoft Developer Network: [Windows Internet Explorer API reference Article]