The border-bottom-right-radius
CSS property rounds the bottom-right corner of an element.
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 background-clip
property.
border-radius
shorthand property that is applied to the element after the border-bottom-right-radius
CSS property, the value of this property is then reset to its initial value by the shorthand property./* 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 ellipse */ /* border-bottom-right-radius: horizontal vertical */ border-bottom-right-radius: 0.5em 1em; border-bottom-right-radius: inherit;
With one value:
<length>
or a <percentage>
denoting the radius of the circle to use for the border in that corner.With two values:
<length>
or a <percentage>
denoting the horizontal semi-major axis of the ellipse to use for the border in that corner.<length>
or a <percentage>
denoting the vertical semi-major axis of the ellipse to use for the border in that corner.<length-percentage>
<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.<length-percentage>{1,2}where
<length-percentage> = <length> | <percentage>
Live example | Code |
---|---|
. | An arc of circle is used as the border div { border-bottom-right-radius: 40px 40px; } |
. | An arc of ellipse is used as the border div { border-bottom-right-radius: 40px 20px; } |
. | The box is a square: an arc of circle is used as the border div { border-bottom-right-radius: 40%; } |
. | The box is not a square: an arc of ellipse is used as the border div { border-bottom-right-radius: 40%; } |
. | The background color is clipped at the border div { border-bottom-right-radius:40%; border-style: black 3px double; background-color: rgb(250,20,70); background-clip: content-box; } |
Specification | Status | Comment |
---|---|---|
CSS Backgrounds and Borders Module Level 3 The definition of 'border-bottom-right-radius' in that specification. | Candidate Recommendation | Initial definition |
Initial value | 0 |
---|---|
Applies to | all elements; but User Agents are not required to apply to table and inline-table elements when border-collapse is collapse . The behavior on internal table elements is undefined for the moment.. It also applies to ::first-letter . |
Inherited | no |
Percentages | refer to the corresponding dimension of the border box |
Media | visual |
Computed value | two absolute <length> s or <percentage> s |
Animation type | a length, percentage or calc(); |
Canonical order | the unique non-ambiguous order defined by the formal grammar |
Desktop | ||||||
---|---|---|---|---|---|---|
Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | |
Basic support | 4
|
12
|
4
|
9 | 10.5 | 5
|
Percentages | 4 | 12 | 4
|
9 | 10.5 | 5 |
Ellipitcal corners | 1 | 12 | 3.5 | 9 | 10.5 | 3 |
Mobile | |||||||
---|---|---|---|---|---|---|---|
Android webview | Chrome for Android | Edge Mobile | Firefox for Android | Opera for Android | iOS Safari | Samsung Internet | |
Basic support | ? | ? | Yes
|
Yes
|
? | ? | ? |
Percentages | ? | ? | Yes | Yes | ? | ? | ? |
Ellipitcal corners | ? | ? | Yes | Yes | ? | ? | ? |
The border-radius-related CSS properties: the CSS shorthand border-radius
, the properties for the other corners: border-top-right-radius
, border-top-left-radius
, and border-bottom-left-radius
.
© 2005–2018 Mozilla Developer Network and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom-right-radius