CSS圆角边框

问题

想要画一个带有圆角弧度的框

方案

使用border-radius

-moz-border-radius: 10px;  /*为Mozilla等定义*/
-webkit-border-radius: 10px; /*为Chrome等webkit内核定义*/
border-radius: 10px;

语法为：

border-radius: 1-4 length|% / 1-4 length|%;

解释：
1、 1-4表示设置一至四个方向的值，具体为：

border-top-left-radius;
border-top-right-radius;
border-bottom-right-radius;
border-bottom-left-radius;
按此顺序设置每个 radii 的四个值。如果省略 bottom-left，则与 top-right 相同。如果省略 bottom-right，则与 top-left 相同。如果省略 top-right，则与 top-left 相同。

2、 length|%表示使用固定数字或者百分比
3、 /在/前面的为水平半径，后面的为垂直半径，后面若省略，则值与前面一致
4、 border-bottom-left-radius: 省略写法lenOne表示水平值，lenTwo表示垂直值
5、

例子 2
border-radius: 2em 1em 4em / 0.5em 3em;
等价于：
border-top-left-radius: 2em 0.5em;
border-top-right-radius: 1em 3em;
border-bottom-right-radius: 4em 0.5em;
border-bottom-left-radius: 1em 3em;

参考文章

CSS3 border-radius 属性