Style borderTopRightRadiusProperty
Style ObjectExample
Add a rounded border to the top-right corner of a div element:
Try it Yourself »
Definition and Usage
The borderTopRightRadius property sets or returns the shape of the top-right corner border.
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 the border-top-right-radius length or percentage define the radius of a quarter ellipse, which in turn defines the shape of the corner of the outer border edge. 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. Percentages for the horizontal radius are relative to the width of the border box, while percentages for the vertical radius are 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 as a %. |
| initial | Sets this property to its default value. Please refer toinitial。 |
| inherit | Inherits this property from its parent element. Please refer toinherit。 |
Technical Details
| Default value: | 0 |
|---|---|
| Return value: | A string, representing the element's border-top-right-radius property. |
| CSS Version | CSS3 |
Related Articles
CSS Reference Manual:border-top-right-radius property
Other Extensions