1. 首页
  2. CSS 菜鸟教程
  3. CSS - border-radius（ 圆角 ）属性

CSS - border-radius（ 圆角 ）属性

CSS 圆角是使用 border-radius 属性创建的。此属性允许您指定元素的外部边框边缘的角的半径。

可能的值

<length>：使用长度值表示圆半径的大小。负值无效。

<percentage>：使用百分比值表示圆半径的大小。

  • 水平轴百分比是指盒子的宽度。
  • 垂直轴百分比是指盒子的高度。
  • 负值无效。

适用于

所有 HTML 元素，但 border-collapse 设置为 collapse 的 table 和 inline-table 元素除外。适用于 ：：first-letter。

DOM 语法


object.style.borderRadius = "length";

下图演示了不同的边框半径角以供参考：

border-radius

下表显示了圆角的可能值，如下所示：

值   描述
radius 是一个 <length> 或 <percentage>，用于设置元素的所有四个角的半径。它仅在单值语法中使用。
top-left and bottom-right <length> 或<percentage> ，用于设置元素的左上角和右下角的半径。它仅在双值语法中使用。
top-right and bottom-left <length> 或<percentage> ，用于设置元素的右上角和左下角的半径。它仅在两个值和三个值语法中使用。
top-left <length> 或<percentage> ，用于设置元素左上角的半径。它用于三个和四个值语法。
top-right <length> 或<percentage>，用于设置元素右上角的半径。它仅在四值语法中使用。
bottom-right <length> 或<percentage> ，用于设置元素右下角的半径。它仅在三个值和四个值语法中使用。
bottom-left <length> 或<percentage>，用于设置元素左下角的半径。它仅在四值语法中使用。
单个边框半径属性（如 border-top-left-radius）不能继承自其父元素。相反，您必须使用各个 longhand 属性来设置每个角的边框半径。

CSS 边框半径 - 长度值

以下示例演示了如何使用 border-radius 属性为框的所有四个角创建圆角 -


<html>
<head>
<style>
	 	.rounded-box {
	 	 	 width: 200px;
	 	 	 height: 100px;
	 	 	 background-color: pink;
	 	 	 line-height: 100px;
	 	 	 border-radius: 20px;
	 	}
</style>
</head>
<body>
	 	<div class="rounded-box">
	 	 	 This is a rounded corner box.
	 	</div>
</body>
</html>

您可以使用 border-radius 属性在框、边框和图像上创建圆角。

这是一个例子 -


<html>
<head>
<style>
	 	.rounded-box {
	 	 	 width: 200px;
	 	 	 height: 100px;
	 	 	 background-color: pink;
	 	 	 border-radius: 20px;
	 	 	 margin-bottom: 10px;
	 	}
	 	.border-box {
	 	 	 width: 200px;
	 	 	 height: 100px;
	 	 	 border-radius: 2em;
	 	 	 border: 3px solid green;	
	 	 	 margin-bottom: 20px; 		
	 	}
	 	.img-border-radius {
	 	 	 background-image: url(images/tree.jpg);
	 	 	 background-size: 100% 100%;
	 	 	 border-radius: 20%;
	 	 	 width: 200px;
	 	 	 height: 150px;
	 	}
</style>
</head>
<body>
	 	<div class="rounded-box">
	 	 	 This is a rounded corner box.
	 	</div>
	 	<div class="border-box">
	 	 	 This is a rounded corner box.
	 	</div>
	 	<div class="img-border-radius">
	 	 	 This is a rounded corner image.
	 	</div>
</body>
</html>

您可以使用 border-radius 属性在元素上创建不同的圆角样式。

这是一个例子 -


<html>
<head>
<style>
	 	.rounded-box {
	 	 	 width: 200px;
	 	 	 height: 100px;
	 	 	 background-color: pink;
	 	 	 margin: 10px;
	 	 	 padding: 5px;
	 	}
	 	.rounded-box.tl {
	 	 	 border-radius: 30px 0 0 0;
	 	}
	 	.rounded-bo x.tr {
	 	 	 border-radius: 0 2em 0 0;
	 	}
	 	.rounded-box.bl {
	 	 	 border-radius: 0 0 0 15%;
	 	}
	 	.rounded-box.br {
	 	 	 border-radius: 0 0 30px 0;
	 	}
	 	.rounded-box.tl-br {
	 	 	 border-radius: 	2em 0 2em 0;
	 	}
	 	.rounded-box.tr-bl {
	 	 	 border-radius: 0 15% 0 15%;
	 	}
</style>
</head>
<body>
	 	<div class="rounded-box tl">
	 	 	 top-left rounded corner.
	 	</div>
	 	<div class="rounded-box tr">
	 	 	 top-right rounded corner.
	 	</div>
	 	<div class="rounded-box bl">
	 	 	 bottom-left rounded corner.
	 	</div>
	 	<div class="rounded-box br">
	 	 	 bottom-right rounded corner.
	 	</div>
	 	<div class="rounded-box tl-br">
	 	 	 top-left and bottom-right rounded corners.
	 	</div>
	 	<div class="rounded-box tr-bl">
	 	 	 top-right and bottom-left rounded corners.
	 	</div>
</body>
</html>

CSS 圆角图像

您可以使用 border-radius 属性在元素上创建不同的圆角样式。

这是一个例子 -


<html>
<head>
<style>
	 	img {
	 	 	 width: 200px;
	 	 	 height: 100px;
	 	 	 margin: 10px;
	 	}
	 	.top-left {
	 	 	 border-radius: 30px 0 0 0;
	 	}
	 	.top-right {
	 	 	 border-radius: 0 2em 0 0;
	 	}
	 	.bottom-left {
	 	 	 border-radius: 0 0 0 15%;
	 	}
	 	.bottom-right {
	 	 	 border-radius: 0 0 30px 0;
	 	}
	 	.tl-br {
	 	 	 border-radius: 	2em 0 2em 0;
	 	}
	 	.tr-bl {
	 	 	 border-radius: 0 15% 0 15%;
	 	}
</style>
</head>
<body>
	 	<h4>top-left rounded corner.</h4>
	 	<img class="top-left" src="images/tree.jpg" />
	 	<h4>top-right rounded corner.</h4>
	 	<img class="top-right" src="images/tree.jpg" />
	 	<h4> bottom-left rounded corner.</h4>
	 	<img class="bottom-left" src="images/tree.jpg" />
	 	<h4>bottom-right rounded corner.</h4>
	 	<img class="bottom-right" src="images/tree.jpg" />
	 	<h4>top-left and bottom-right rounded corners.</h4>
	 	<img class="tl-br" src="images/tree.jpg" />
	 	<h4>top-right and bottom-left rounded corners.</h4>
	 	<img class="tr-bl" src="images/tree.jpg" />
</body>
</html>

我们可以使用 CSS border-radius 属性创建一个圆和一个椭圆。

这是一个例子 -


<html>
<head>
<style>
	 	.rounded-circle {
	 	 	 width: 100px;
	 	 	 height: 100px;
	 	 	 background-color: pink;
	 	 	 text-align: center;
	 	 	 border-radius: 50%;
	 	}
	 	.rounded-ellipse {
	 	 	 width: 200px;
	 	 	 height: 100px;
	 	 	 background-color: pink;
	 	 	 text-align: center;
	 	 	 border-radius: 50%;
	 	}
</style>
</head>
<body>
	 	<div class="rounded-circle">
	 	 	 circle
	 	</div>
	 	<div class="rounded-ellipse">
	 	 	 ellipse
	 	</div>
</body>
</html>

CSS border-radius - 相关属性

以下是与 border-radius 相关的 CSS 属性列表：

属性 描述
border-top-left-radius 设置元素边框左上角的圆度。
border-top-right-radius 设置元素边框右上角的圆度。
border-bottom-right-radius 设置元素边框右下角的圆度。
border-bottom-left-radius 设置元素边框左下角的圆度。
border-start-start-radius 设置元素边框的块开始角和内联开始角的圆度。
border-start-end-radius 设置元素边框的块开始角和内联结束角的圆度。
border-end-start-radius 设置元素边框的块端角和内联开始角的圆度。.
border-end-end-radius 设置元素边框的块端角和内联端角的圆度。
<< CSS - 数据类型 CSS - border-image（边框图像）属性 >>