CSS 圆角边框

CSS 圆角边框可以为你的网页元素添加圆角边框效果，使其更加美观。在 CSS3 中，使用 border-radius 属性来设置元素的圆角边框。

语法

以下是 border-radius 属性的语法：

border-radius: value;

value 参数可以取一个或多个值来设置圆角。如果给出一个值，则四个边的圆角半径相同。如果给出两个值，则第一个值为左上角和右下角的圆角半径，第二个值为右上角和左下角的圆角半径。同理，如果给出三个值，则第一个值为左上角的圆角半径，第二个值为右上角和左下角的圆角半径，第三个值为右下角的圆角半径。如果给出四个值，则分别设置左上角、右上角、右下角和左下角的圆角半径。

示例

以下代码将为一个 div 元素添加 10px 的圆角边框：

div{
  border: 1px solid black; /* 边框 */
  border-radius: 10px; /* 圆角 */
}

以下代码将为一个 button 元素添加不同大小的圆角边框：

button{
  border: 1px solid black; /* 边框 */
  border-radius: 0px 10px 10px 0px; /* 左上角和右下角的圆角半径为 0 像素，右上角和左下角的圆角半径为 10 像素 */
}

注意事项

• border-radius 属性只适用于宽度和高度大于等于其圆角半径的元素。
• 在一些旧版的浏览器中不支持 border-radius 属性。