CSS border-top-right-radius 属性控制元素边框右上角的圆度。
可能的值
<length>：使用长度值表示圆半径的大小。负值无效。
<percentage>：使用百分比值表示圆半径的大小。
- 水平轴百分比是指盒子的宽度。
- 垂直轴百分比是指盒子的高度。
- 负值无效。
适用于
所有 HTML 元素，但 border-collapse 设置为 collapse 的 table 和 inline-table 元素除外。适用于 ：：first-letter。
DOM 语法
object.style.borderTopRightRadius = "length";
如果设置 border-top-right-radius 属性，然后设置 border-radius 简写属性，则 border-top-right-radius 属性将重置为其默认值。
CSS border-top-right-radius - <长度>值
以下是如何使用长度值创建右上角圆角的示例 -
<html>
<head>
<style>
.rounded-border {
background-color: pink;
border: 3px solid green;
border-top-right-radius: 50px;
background-size: 100% 100%;
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<div class="rounded-border">
top-right rounded corner box.
</div>
</body>
</html>
CSS border-top-right-radius - <百分比>值
以下是如何使用百分比值创建右上角圆角的示例 -
<html>
<head>
<style>
.rounded-border {
background-color: pink;
border: 3px solid green;
border-top-right-radius: 25%;
background-size: 100% 100%;
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<div class="rounded-border">
top-right rounded corner box.
</div>
</body>
</html>
CSS border-top-right-radius - 带动画
以下是如何使用动画创建右上角圆角的示例 -
<html>
<head>
<style>
.rounded-border {
background-color: pink;
border: 3px solid green;
background-size: 100% 100%;
width: 200px;
height: 200px;
animation: animatedRadius 5s infinite;
}
@keyframes animatedRadius {
50% { border-top-right-radius: 100px; }
}
</style>
</head>
<body>
<div class="rounded-border">
top-right rounded corner with animation.
</div>
</body>
</html>
CSS border-top-right-radius - 具有不同的形状
您可以使用 border-top-right-radius 属性为元素的右上角圆角创建不同的形状。
这是一个例子 -
<html>
<head>
<style>
.rounded-box {
width: 150px;
height: 150px;
background-color: pink;
border: 3px solid green;
margin: 10px;
}
.rounded-box.circle-arc {
border-top-right-radius: 35px;
}
.rounded-box.ellipse-arc {
border-top-right-radius: 75px 35px;
}
.rounded-box.square-per {
border-top-right-radius: 30%;
}
.non-square-per {
border-top-right-radius: 30%;
width: 200px;
height: 100px;
background-color: pink;
border: 3px solid green;
margin: 10px;
}
</style>
</head>
<body>
<h3>Different shapes using border-top-right-radius property</h3>
<div class="rounded-box circle-arc">
Arc of an circle.
</div>
<div class="rounded-box ellipse-arc">
Arc of an ellipse.
</div>
<div class="rounded-box square-per">
Square element with % radius.
</div>
<div class="non-square-per">
Non-square element with % radius.
</div>
</body>
</html>
CSS border-top-right-radius - 带图片
您可以使用 border-top-right-radius 属性在图像的右上角添加圆角边框。
这是一个例子 -
<html>
<head>
<style>
.img-border-radius {
background-image: url(images/tree.jpg);
border-top-right-radius: 6em;
background-size: 100% 100%;
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<div class="img-border-radius">
top-right rounded corner image.
</div>
</body>
</html>
