Easy Tutorial
❮ Prop Style Backgroundattachment Event Cancelable ❯

Style borderTopRightRadius Property

Style Object

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


Style Object

❮ Prop Style Backgroundattachment Event Cancelable ❯