YouTip

## Definition and Usage The `border-bottom-right-radius` property specifies the radius of the bottom-right corner of an element's border. This property allows you to create rounded corners on the bottom-right side of an element. * **Default value**: 0 * **Inherited**: No * **Animatable**: Yes * **Version**: CSS3 * **JavaScript syntax**: object.style.borderBottomRightRadius="10px" ## Syntax ```css border-bottom-right-radius: length|percentage|initial|inherit; ``` ### Values | Value | Description | |--------------|-------------| | `length` | Sets the corner radius in pixels, points, ems, etc. | | `percentage` | Sets the corner radius as a percentage of the element's width or height (whichever is smaller). | | `initial` | Sets this property to its default value. | | `inherit` | Inherits this property from its parent element. | ## Examples ### Example 1: Rounded bottom-right corner with a fixed size ```html div { border: 2px solid #000; border-bottom-right-radius: 10px; padding: 10px; margin: 10px; } ``` ### Example 2: Rounded bottom-right corner with percentage ```html div { border: 2px solid #000; border-bottom-right-radius: 20%; padding: 10px; margin: 10px; } ``` ### Example 3: Different horizontal and vertical radii ```html div { border: 2px solid #000; border-bottom-right-radius: 10px 20px; padding: 10px; margin: 10px; } ``` ## Browser Support The following table shows which browsers support the `border-bottom-right-radius` property: | Browser | Version | |-------------------|---------| | Chrome | 4+ | | Firefox | 4+ | | Safari | 5+ | | Opera | 10.5+ | ## Related Pages * ( * ( * (