This page is Ready to Use

Notice: The WebPlatform project has been discontinued when the Stewards partnership agreement ended in September 2015. This site has been frozen, and the assets we have created will remain.

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

Related pages

Attributions