在网页样式开发中，圆角边框是提升元素视觉质感、让页面更柔和常用的设计手段，CSS的border属性和radius属性结合就能轻松实现这个效果，下面我们来详细了解具体的使用方法。
border属性的基础用法
border属性用于设置元素的边框样式，它包含三个核心子属性：border-width表示边框宽度，border-style表示边框样式，border-color表示边框颜色。我们可以单独设置这三个属性，也可以使用简写形式一次性定义。
border-style支持的常见值有solid（实线）、dashed（虚线）、dotted（点线）、double（双线）等，下面是单独设置border属性的代码示例：
/* 单独设置边框三个属性 */
.box1 {
border-width: 2px;
border-style: solid;
border-color: #333;
}
/* 简写形式，顺序为width style color */
.box2 {
border: 2px dashed #ff0000;
}
radius属性设置圆角
radius属性用于设置元素的圆角效果，它可以单独设置四个角的圆角半径，也可以统一设置。border-radius是简写属性，对应的单角属性有border-top-left-radius、border-top-right-radius、border-bottom-right-radius、border-bottom-left-radius。
radius的取值可以是固定像素值，也可以是百分比，百分比是相对于元素自身的宽高计算的。下面是radius的不同设置方式示例：
/* 四个角统一设置10px圆角 */
.radius1 {
border-radius: 10px;
}
/* 四个角分别设置不同圆角，顺序为左上 右上 右下 左下 */
.radius2 {
border-radius: 10px 20px 30px 40px;
}
/* 左上角设置15px圆角，其他角默认0 */
.radius3 {
border-top-left-radius: 15px;
}
/* 圆形，宽高相等时50%为圆形 */
.circle {
width: 100px;
height: 100px;
border-radius: 50%;
}
radius与border结合应用
将border和radius结合使用，就能得到带圆角的边框效果，只需要在设置border属性的基础上，添加border-radius属性即可。两者的顺序没有强制要求，不过一般先写border再写radius，代码可读性更好。
下面是几个常见的结合应用案例：
基础圆角边框
给元素添加实线圆角边框，这是最常见的用法：
.basic-radius-border {
width: 200px;
height: 100px;
/* 设置边框样式 */
border: 2px solid #1890ff;
/* 设置四个角8px圆角 */
border-radius: 8px;
/* 可选：添加内边距让内容不贴边框 */
padding: 10px;
}
虚线圆角边框
将border-style设置为dashed，就能得到虚线圆角边框：
.dashed-radius-border {
width: 200px;
height: 120px;
/* 虚线边框，宽度1px，颜色#666 */
border: 1px dashed #666666;
/* 左上和右下角20px圆角，其他角0 */
border-radius: 20px 0;
padding: 15px;
}
单侧圆角边框
如果只需要某几个角有圆角，可以单独设置对应角的radius值：
.single-side-radius {
width: 200px;
height: 100px;
border: 3px solid #52c41a;
/* 只设置左上和右上角圆角 */
border-top-left-radius: 12px;
border-top-right-radius: 12px;
padding: 10px;
}
注意事项
- radius的取值不要超过元素宽高的一半，否则圆角效果会超出预期，比如宽高100px的元素，radius最大设置为50px就是圆形。
- 如果元素设置了overflow: hidden属性，圆角超出元素部分会被裁剪，这是正常的表现。
- IE8及以下版本不支持border-radius属性，如果需要兼容旧浏览器，可以考虑使用图片替代或者不使用圆角效果。
- 当border-width较大时，radius的效果会受边框宽度影响，实际圆角的圆心计算会包含边框的宽度。
常见问题解答
问：设置了border-radius但是看不到圆角效果？
答：首先检查是否设置了border属性，如果没有边框，只有radius是看不到圆角效果的；其次检查radius的取值是否为0，或者是否被其他样式覆盖了。
问：如何让边框的圆角和背景的圆角一致？
答：只需要给元素同时设置border-radius和背景相关属性即可，背景会自动跟随border-radius的圆角裁剪，不需要额外设置。
.bg-radius {
width: 200px;
height: 100px;
border: 2px solid #faad14;
border-radius: 10px;
/* 背景也会自动应用圆角 */
background-color: #fffbe6;
padding: 10px;
}