border-bottom-left-radius CSS property rounds the bottom-left corner of an element by specifying the radius (or the radius of the semi-major and semi-minor axes) of the ellipse defining the curvature of the corner.
The rounding can be a circle or an ellipse, or if one of the value is
0 no rounding is done and the corner is square.
A background, being an image or a color, is clipped at the border, even a rounded one; the exact location of the clipping is defined by the value of the
/* the corner is a circle */ /* border-bottom-left-radius: radius */ border-bottom-left-radius: 3px; /* Percentage values */ /* circle if box is a square or ellipse if box is a rectangle */ border-bottom-left-radius: 20%; /* same as above: 20% of horizontal(width) and vertical(height) */ border-bottom-left-radius: 20% 20%; /* 20% of horizontal(width) and 10% of vertical(height) */ border-bottom-left-radius: 20% 10%; /* the corner is an ellipse */ /* border-bottom-left-radius: horizontal vertical */ border-bottom-left-radius: 0.5em 1em; border-bottom-left-radius: inherit;
With one value:
- the value is a
<percentage>denoting the radius of the circle to use for the border in that corner.
With two values:
- Denotes the size of the circle radius or the semi-major and semi-minor axes of the ellipse. As absolute length it can be expressed in any unit allowed by the CSS
<length>data type. 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.
|Applies to||all elements; but User Agents are not required to apply to |
|Percentages||refer to the corresponding dimension of the border box|
|Computed value||two absolute |
|Animation type||a length, percentage or calc();|
|An arc of circle is used as the border
|An arc of ellipse is used as the border
|The box is a square: an arc of circle is used as the border
|The box is not a square: an arc of ellipse is used as the border
|The background color is clipped at the border
|CSS Backgrounds and Borders Module Level 3
The definition of 'border-bottom-left-radius' in that specification.
|Candidate Recommendation||Initial definition|
BCD tables only load in the browser