圆角能够让页面元素看起来不是那么生硬，能够增强页面的曲线之美。CSS 3中专门针对元素的圆角效果新增了border-radius属性。

border-radius属性的语法格式如下。

border-radius: none | <length>{1,4} [ / <length>{1,4} ]?

border-radius属性是一种缩写方式，在该属性中可以按照top-left、top-right、bottom-right和bottom-left的顺时针顺序同时设置4个角的圆角半径值，其主要会有以下4种情况出现。

（1）border-radius属性只设置一个值。

如果border-radius属性只设置一个属性值，那么就说明top-left、top-right、bottom-right和bottom-left四个值是相等的，也就是元素的4个圆角效果相同。

（2）border-radius属性设置两个值。

如果border-radius属性设置两个属性值，那么就说明top-left与bottom-right值相等，并取第一个值；top-right与bottom-left值相等，并取第二个值。也就是元素的左上角与右下角取第一个值，右上角与左下角取第二个值。

（3）border-radius属性设置三个值。

如果border-radius属性设置三个属性值，则第一个值设置top-left，第二个值设置top-right和bottom-left，第三个值设置bottom-right。

（4）border-radius属性设置四个值。

如果border-radius属性设置四个属性值，则第一个值设置top-left，第二个值设置top-right，第三个值设置bottom-right，第四个值设置bottom-left。