border-top-right-radius
CSS border-top-right-radius Property
The CSS border-top-right-radius defines the round shape of the top right corner of the element.
This property is one of the CSS3 properties.
There are three kinds of rounding. It can be a circle or an ellipse, or the value is 0, the corner is square. If you use background image or color, it will be clipped at the border. The process of clipping is defined by the value of background-clip property.
The property has two values: length and percentage. The border-top-right-radius property specifies the horizontal and vertical radii that define the rounded upper-right corner for a border box. When only one value is given, that value specifies both horizontal and vertical radius of the ellipse. If there are two values, the first one sets the horizontal radius and the second one sets the vertical radius. Percentages for the horizontal radii refer to the width of the box, percentages for the vertical radius refer to the height of the box. Negative values are not allowed.
| 类目 | 类目 |
|---|---|
| Initial Value | 0 |
| Applies to | All elements. It also applies to ::first-letter. |
| Inherited | No. |
| Animatable | Yes. Top right border is animatable. |
| Version | CSS3 |
| DOM Syntax | object.style.borderTopRightRadius = “25px”; |
Syntax
Syntax
border-top-right-radius: length | % | initial | inherit;
Let’s try an example where only one value is used. It defines both top border and right border of the ellipse.
Example of the border-top-right-radius property:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
height: 40px;
background: #666;
border: 4px solid #000000;
border-top-right-radius: 35px;
}
</style>
</head>
<body>
<h2>Border-top-right-radius example.</h2>
<div></div>
</body>
</html>
In the following example, the first one defines the top border of the ellipse, and the second one represents the right border of the ellipse.
Result
Example of the border-top-right-radius property with two values:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
height: 40px;
background: #666;
border: 4px solid #000000;
border-top-right-radius: 35px 10px;
}
</style>
</head>
<body>
<h2>Border-top-right-radius example.</h2>
<div></div>
</body>
</html>
Example of the border-top-right-radius property in percentages:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
height: 40px;
background: #1c87c9;
border: 4px solid #000000;
border-top-right-radius: 60% 30%;
}
</style>
</head>
<body>
<h2>Border-top-right-radius example.</h2>
<div></div>
</body>
</html>
Values
Values
| Value | Description | Play it |
|---|---|---|
| length | Defines the round shape of the top-left corner. | Play it » |
| % | Defines the round shape of the top-left corner in %. | Play it » |
| initial | Sets the property to its default value. | Play it » |
| inherit | Inherits the property from its parent element. |