CSS border-top-right-radius property

Definition and Usage

The border-top-right-radius property defines the shape of the bottom right border corner.

Tip:This property allows you to add rounded border corners to an element.

See Also:

CSS3 Tutorial:CSS3 Borders

Example

Add rounded border corners to the top right corner of the div element:

div
{
border:2px solid;
border-top-right-radius:2em;
}

Try It Yourself

CSS Syntax

border-top-right-radius: length|% [length|%];

Note:The length value and percentage value of the border-top-right-radius property define the radius (radii) of a quarter ellipse (defining the shape of the corner of the external border edge). The first value is the horizontal radius, and the second value is the vertical radius. If the second value is omitted, the first value is copied. If the length is zero, the corner is square, not round. The percentage value of the horizontal radius refers to the width of the border box, and the percentage value of the vertical radius refers to the height of the border box.

Property Value

Value Description Test
length Define the shape of the top right corner. Test
% Define the shape of the top right corner in percentage. Test

Technical Details

Default Value: 0
Inheritance: no
Version: CSS3
JavaScript Syntax: object.style.borderTopRightRadius="5px"

Browser Support

The numbers in the table indicate the first browser version that fully supports this attribute.

Chrome IE / Edge Firefox Safari Opera
5.0
4.0 -webkit-		 9.0 4.0
3.0 -moz-		 5.0
3.1 -webkit-		 10.5