CSS border-bottom-right-radius Property
Description
The border-bottom-right-radius is a CSS property that allows you to control the rounding of the bottom-right corner of an element, typically used for styling the corners of boxes, such as divs or buttons. By specifying a radius value, you can create a smooth, curved corner effect, softening the sharp edges of the element. This property is part of the broader border-radius property, which includes values for all four corners, but border-bottom-right-radius specifically targets the bottom-right corner, making it versatile for achieving unique and visually appealing design effects.
- Initial value
- 0
- Applies to
- All elements
- Inherited
- No
- Computed value
- Two absolute [length] or percentages
- Animatable
- Yes
- JavaScript syntax
- object.style.borderBottomRightRadius
Interactive Demo
Demo of the border bottom right radius property.
Syntax
border-bottom-right-radius: [ <length> | <percentage> ]{1,2}
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 axe refer to the width of the box, percentages for the vertical axe refer to the height of the box. Negative values are invalid.
Example
<div class="border">This is an example of the border-bottom-right-radius property using a red solid border 2px in width and a 10px radius.</div>.border {
border: 2px solid red;
border-bottom-right-radius: 10px;
margin: 20px;
padding: 20px;
}Browser Support
The following table will show you the current browser support for the CSS border-bottom-right-radius property.
| Desktop | |||||
 |
 |
 |
 |
 |
|
| 12 | 4 | 4 | 10.5 | 5 | |
| Tablets / Mobile | |||||
|
|
|
|
 |
 |
| 18 | 4 | 11 | 4.2 | 1 | 37 |
Last updated by CSSPortal on: 31st December 2023