CSS 中使用 border-radius 属性为元素设置圆角边框，可指定一个或四个长度值，分别表示四个角的圆角程度：一个值：适用于所有角。两个值：水平和垂直半径，适用于所有角。三个值：左上、右上和右下角。四个值：左上、右上、右下和左下角。
CSS 圆角边框设置
在 CSS 中，可以使用 border-radius 属性为元素设置圆角边框。border-radius 属性值是一个或四个长度值，分别表示元素四个角的圆角程度：
- 一个值：应用相同的圆角半径到所有四个角。
- 两个值：水平半径和垂直半径，应用于所有四个角。
- 三个值：左上、右上和右下角的半径。
- 四个值：分别应用于左上、右上、右下和左下角。
语法：
border-radius:| | inherit;
示例：
立即学习“前端免费学习笔记（深入）”；
圆角矩形
.rounded-rectangle {
border-radius: 10px; /* 所有角半径为 10px */
}椭圆形按钮
.oval-button {
border-radius: 50%; /* 所有角半径为 50%，即形成一个圆形 */
}不同角的圆角半径
/* 左上、右上、右下、左下角半径分别为 10px、20px、30px、40px */
.different-radii {
border-radius: 10px 20px 30px 40px;
}注意：**
- 圆角半径不能大于元素的宽度或高度一半。
-
inherit值可继承父元素的圆角半径设置。
