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