border-bottom-right-radius CSS property sets the rounding of the bottom-right corner of the element.
/* The corner is a circle */ /* border-bottom-right-radius: radius */ border-bottom-right-radius: 3px; /* Percentage values */ border-bottom-right-radius: 20%; /* corner of a circle if box is a square or else corner of a rectangle */ border-bottom-right-radius: 20% 20%; /* same as above */ /* 20% of horizontal(width) and vertical(height) */ border-bottom-right-radius: 20% 10%; /* 20% of horizontal(width) and 10% of vertical(height) */ /*The corner is an ellipsis */ /* border-bottom-right-radius: horizontal vertical */ border-bottom-right-radius: 0.5em 1em; border-bottom-right-radius: inherit;
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
border-radiusshorthand property that is applied to the element after the
border-bottom-right-radiusCSS property, the value of this property is then reset to its initial value by the shorthand property.
|适用元素||all elements; but User Agents are not required to apply to |
|Percentages||refer to the corresponding dimension of the border box|
|计算值||two absolute |
|Animation type||a length, percentage or calc();|
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 ellipsis. 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.
|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
|Candidate Recommendation||Initial definition|
BCD tables only load in the browser