Style borderTopRightRadius
Property
Example
Add a rounded border to the top-right corner of a div element:
Definition and Usage
The borderTopRightRadius
property sets or returns the shape of the border's bottom-right corner.
Tip: This property allows you to add rounded borders to elements!
Browser Support
IE9+, Firefox, Chrome, Safari, and Opera support the borderTopRightRadius
property.
Syntax
Return the borderTopRightRadius
property:
Set the borderTopRightRadius
property:
Note: The two values of length or percentage for border-top-right-radius
define the radius of a quarter ellipse, which defines the shape of the outer border edge's corner. The first value is the horizontal radius, and the second value is the vertical radius. If the second value is omitted, it is copied from the first value. If both lengths are 0, the corner is square, not rounded. The percentage for the horizontal radius is relative to the width of the border box, while the percentage for the vertical radius is relative to the height of the border box.
Property Values
Value | Description |
---|---|
length | Defines the shape of the top-right corner. |
% | Defines the shape of the top-right corner in percentage. |
initial | Sets this property to its default value. See initial |
inherit | Inherits this property from its parent element. See inherit |
Technical Details
Default value: | 0 |
---|---|
Return value: | String, representing the border-top-right-radius property of the element. |
--- | --- |
CSS Version | CSS3 |
--- | --- |
Related Articles
CSS Reference: border-top-right-radius Property