Border-Radius 属性

border-radius 属性用于设置元素的圆角。

语法：

border-radius: value;

值可以是一个或四个，分别对应元素的四个角。每个值可以是长度或百分比。

例如，以下代码会将一个正方形的四个角设置成 10px 的圆角：

.square {
  width: 100px;
  height: 100px;
  border-radius: 10px;
}

圆形元素

如果希望创建圆形元素，可以将 border-radius 属性设置为元素宽度或高度的一半。

例如，以下代码会创建一个直径为 100px 的圆形元素：

.circle {
  width: 100px;
  height: 100px;
  border-radius: 50%;
}

椭圆形元素

可以将 border-radius 属性的水平和垂直半径设为不同的值，可以创建椭圆形的元素。

例如，以下代码会创建一个水平半径为 100px、垂直半径为 50px 的椭圆形元素：

.ellipse {
  width: 200px;
  height: 100px;
  border-radius: 100px/50px;
}

多个值

也可以给 border-radius 属性指定多个值，分别对应元素的四个角。例如，以下代码会将左上和右下两个角设置成 10px 的圆角，右上和左下两个角设置成 20px 的圆角：

.multiple {
  width: 100px;
  height: 100px;
  border-radius: 10px 20px;
}

浏览器兼容性

border-radius 属性兼容所有主流浏览器，包括 IE 9 及以上。在旧版 IE 中，可以使用 IE filter 属性实现圆角效果。

总结

border-radius 属性是一个很实用的 CSS 属性，可以用来创建不同形状的元素。值得注意的是，在设置圆角时，尽量使用百分比或 em 单位，而不是像素单位，这样可以避免在缩放页面时导致元素形状失真。