border-radius边框圆角

CSS3新增了元素边框圆角。传统圆角是使用多个背景图拼接而成，比较麻烦。相比于传统方式，新增的圆角边框的优点就是简便了开发者，并且优化了页面加载，而且在网页背景图加载不完全的时候会导致视觉效果差，避免了这种情况。
border-radius（边框半径）：取值可以是em、rem、px、百分比等合法的度量值
下面是一个 width: 200px; height: 200px;的div

设置圆角半径为20px
border-radius: 20px;

这条语句同时将每个圆角的"水平半径"（horizontal radius）和"垂直半径"（vertical radius）都设置为20px。

border-radius可以同时设置1-4个值。

如果设置1个值，那么每个角分别是相同的半径值
border-radius: 20px;

如果设置2个值，那么左上和右下是一个值，右上和左下是第二个值
border-radius: 20px 40px;

如果设置3个值，那么左上是一个值，右上和左下是第二个值，右下是第三个值
border-radius: 20px 40px 60px;

如果设置4个值，那么左上是一个值，右上是第二个值，右下是第三个值，左下是第四个值（顺时针）
border-radius: 20px 40px 60px 100px;

如果设置的圆角不是正圆，还可以用斜杠设置第二组值。

border-radius: 20px/40px ;
第一组值表示水平半径，第二组值表示垂直半径。
这条语句同时将每个圆角的"水平半径"（horizontal radius）设置为40px，“垂直半径”（vertical radius）设置为80px。

单个圆角的设置

可以单独对每个角进行设置：
border-top-left-radius 左上
border-top-right-radius 右上
border-bottom-right-radius 右下
border-bottom-left-radius 左下
如：
border-bottom-left-radius: 40px ;