今天想找个例子，才发现以前对这个属性理解不深，先记下来
这个属性支持浏览器IE 9、Opera 10.5、Safari 5、Chrome 4和Firefox 4
首先这里用的chrome浏览器测试
其次border-radius和-webkit-border-radius在同样属性的时候，表现并不一样
.test1{-webkit-border-radius:30px 10px;
width:100px;height:100px;background:#f6e30b;border: 1px solid #eda306;
}
.test2{border-radius:30px 10px;
width:100px;height:100px;background:#f6e30b;border: 1px solid #eda306;
}
本来就是用的-wibkit-内核，所以建议，写的时候，格式最好把纯粹的写法写在最下面，如这样
.test1{-webkit-border-radius:30px 10px;
border-radius:30px 10px;
width:100px;height:100px;background:#f6e30b;border: 1px solid #eda306;
}
首先一般都会写类似 border-radius:10px; 这样的
div{border-radius:50px;
width:50px;height:50px;background:#f6e30b;border: 1px solid #eda306;
}
如果值和宽高一样，就是圆形的。
其实这是一种简写，就像border一样，正常是这样的
border-top-left-radius:50px;
border-top-right-radius:50px;
border-bottom-right-radius:50px;
border-bottom-left-radius:50px;
简写的话，分别是左上、右上、左下、右下，正好是顺时针方向
另外的简写的话
div{border-radius:30px 10px; //刚好对角
width:100px;height:100px;background:#f6e30b;border: 1px solid #eda306;
}
//刚好对角
div{border-radius:30px 30px 10px; //还是按照顺序，左上、右上是两个就是加上左下，右下
width:100px;height:100px;background:#f6e30b;border: 1px solid #eda306;
}
//还是按照顺序，左上、右上是两个就是加上左下，右下
另外今天写这个是因为看到一种写法
div{border-radius: 2em/1em}
中间加了一个 / ，第一个参数表示圆角的水平半径，第二个参数表示圆角的垂直半径，所以就可以画一个左右不对称的圆角
分开写的话要这么写，还是分别左上、右上、左下、右下
div{border-radius:10px 20px 30px 40px/40px 30px 20px 10px}
一个是水水平的，一个是垂直的，看左上角的就是水平较平，垂直较圆（10/40）
可以用简写
div{border-radius:{100px / 10px}
div{border-radius:{100px 50px / 10px 30px}
原文：http://www.cnblogs.com/change-oneself/p/4921209.html