一、属性介绍
CSS Border Rounded属性，指的是通过添加border-radius属性来为元素边框添加圆角效果。border-radius可以控制边框的圆角大小，可以使用具体像素值，也可以使用百分比，甚至可以使用em、ex作为单位。
以下是设置了圆角效果的CSS属性：
border-top-left-radius
border-top-right-radius
border-bottom-left-radius
border-bottom-right-radius分别控制元素四个角的圆角大小。如果我们想要一个元素四个角的圆角大小相同，只需要设置border-radius属性即可。
border-radius: 20px;二、简单示例
下面是一个简单的示例，我们给一个div元素添加了圆角效果。
<div style="width:200px;height:100px;border:2px solid red;border-radius:25px;">
<p>这是一个例子</p>
</div>该div元素的宽为200px，高为100px，边框为2px的红色实线边框，圆角半径为25px。
三、多种圆角样式
在设置边框的圆角大小时，不仅仅只能设置一个具体数值，还可以设置多个数值，用/分隔，每个数值用空格隔开。
以下是示例代码：
border-radius: 20px 10px 30px 40px / 10px 30px 20px 40px;这行代码设置了一个复合的border-radius值。值的顺序是顺时针排列的，从左上角开始。第一个数值指的是左上角的水平半径，第二个数值指的是左上角的垂直半径，以此类推。
四、椭圆形圆角
除了可以设置具体像素值之外，border-radius属性还可以使用百分比来设置圆角大小。如果上下左右四个角的半径是相等的，可以这样写：
border-radius: 50%;这样可以得到一个正圆形的圆角效果，但如果四个角的半径不相等时，就会变成椭圆形。
以下是示例代码：
<div style="width:200px;height:100px;border:2px solid red;border-radius:50%;background-color:grey;">
<p>这是一个例子</p>
</div>五、不同背景色的圆角效果
我们可以在一个元素中设置多个背景色，比如使用线性渐变或径向渐变的背景。但这样会导致圆角效果失效。为了解决这个问题，我们可以使用伪元素:before和:after，再用盒模型的基本样式将其隐藏起来，并为这两个伪元素添加样式。
以下是示例代码:
<style>
#rounded {
width: 200px;
height: 100px;
position: relative;
overflow: hidden;
background: linear-gradient(to right, red , orange);
}
#rounded:before, #rounded:after {
position: absolute;
content: '';
width: 100%;
height: 100%;
border-radius: 20px;
background: linear-gradient(to right, red , orange);
z-index: -1;
}
#rounded:before {
transform: rotate(45deg);
top: -35%;
left: -15%;
}
#rounded:after {
transform: rotate(45deg);
bottom: -35%;
right: -15%;
}
</style>
<div id="rounded">
<p>这是一个例子</p>
</div>上述代码中，我们将元素溢出的部分剪裁掉，再添加两个伪元素，使用border-radius属性来设置圆角大小，然后将它们旋转45度并分别放到元素的顶部左侧和底部右侧。这样就可以得到不同背景色的圆角效果。
六、总结
CSS Border Rounded属性可以为元素的边框添加圆角效果。可以设置四个角的半径大小，也可以使用复合值进行设置。此外还可以使用百分比来设置圆角大小，并且可以实现不同背景色的圆角效果。