CSS border-top-right-radius
property specifies a radius for elementโs top-right corner.
See the paragraph below, it has a 10px radius for its top-right corner.
This paragraph has a rounded top-right corner.
The radius value can be specified in any valid CSS length format such as โpxโ, โemโ, โremโ, โcmโ, etc. But we mostly specify it in โpxโ.
Try out the below example to see how it works:
Example:
h1{ border: 3px solid tomato; border-top-right-radius: 10px; }
CSS Syntax:
The border-top-right-radius
property has the following syntax:
border-top-right-radius: radius| initial | inherit;
Property Values
The border-top-right-radius
property accepts the following values:
radius | It defines the shape of the top-right corner of the element. The default value is 0. It specifies the radius of the top-right corner in a valid CSS length format such as โpxโ, โemโ, โremโ, โcmโ, etc. |
initial | Sets the border-top-right-radius to its default value. Which is 0(zero). |
inherit | Inherits the radius value from the parent element. |
General Info
Default Value | 0(zero) |
Inherited | No |
JavaScript Usage | element.style.borderTopRightRadius = โ10pxโ |
Related Pages
CSS Tutorial: CSS Borders