看似简单的圆角对口碑却至关重要，它是紧跟Web 2.0潮流的关键，是打动大众的必要手段。由于它是非常普遍需求的一种设计元素，因此规范的制定者们将border-radius属性加入了边框与背景模块中。它的语法简单易用。例如：
border-radius:10px;

你可以使用像素或者其他任何CSS单位，以上代码产生的效果如下所示：

含相同圆角的简单容器

举一反三，你还能给它定义两个、三个甚至四个值，例如：

• border-radius: 0px 0px 20px 20px; 分别代表左上角、右上角、右下角、左下角的值。
• border-radius: 0px 10px 20px; 分别代表左上角、右上角与左下角、右下角的值。
• border-radius: 10px 20px; 分别代表左上角和右下角、右上角和左下角的值。

效果见以下示例：

左边的容器设置了四个值，右边的容器设置了两个值。
例子没有展示设置了三个值的情况，因为我认为其意义不大

对于border-radius属性，你还可以指定以正斜杠隔开的x与y两个值来分别表示圆角的水平与垂直半径。例如，以下代码将水平半径设为10px而垂直半径设为20px：

对容器设置不同的水平与垂直半径

border-radius: 10px/20px;
x与y的值还可以根据如下规则来将其设置成一组值。你可以给四个圆角半径设置不同的值，例如：
border-radius: 5px 10px 15px 30px/30px 15px 10px 5px;
或者你还可以给四个圆角设置不同的水平半径和一个相同的垂直半径：
border-radius: 10px 20px 30px 40px/30px;
以上例子如下效果所示：

分别定义不同的水平与垂直半径

相信大家看到这里的时候，对圆角的水平与垂直半径不是很理解，来看看以下两张图：

border-top-left-radius: 55pt 25pt

图片来源：https://www.w3.org/TR/2014/CR-css3-background-20140909/#the-border-radius