CSS - border-top-right-radius 属性

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>

打印本页