绘制一个圆角边框的示例
.div{
border: solid 5px blue;
border-radius: 20px;
-moz-border-radius:20px;
-o-border-radius: 20px;
-webkit-border-radius:20px;
background-color:skyblue;
padding:20px;
width:180px;
}
在示例中具有一个div元素，使用border-radius属性将其边框绘制为圆角边框，圆角半径为20像素，边框颜色为蓝色，div元素背景色为浅蓝色。
.wrap {
border: solid 5px blue;
border-radius: 40px 20px;
-moz-border-radius:40px 20px;
-o-border-radius:40px 20px;
-webkit-border-radius:40px 20px;
background-color:skyblue;
padding:20px;
width:180px;
}
在CSS3中，如果使用了border-radius属性但是把边框设定为不显示的时候，浏览器将把背景的四个角绘制为圆角。
使用了border-radius属性后，不管边框是什么种类，都会将边框沿着圆角曲线进行绘制。
如果要绘制的圆角边框四个角半径各不相同，可以将border-top-left-radius属性、border-top-right-radius属性、border-bottom-right-radius属性、border-bottom-left-radius属性结合起来使用。
示例：
.wrap {
border: solid 5px blue;
border-radius-topleft:10px;
border-radius-topright:20px;
border-radius-bottomright:30px;
border-radius-bottomleft:40px;
-moz-border-radius-topleft:10px;
-moz-border-radius-topright:20px;
-moz-border-radius-bottomright:30px;
-moz-border-radius-bottomleft:40px;
-o-border-radius-topleft:10px;
-o-border-radius-topright:20px;
-o-border-radius-bottomright:30px;
-o-border-radius-bottomleft:40px;
-webkit-border-top-left-radius:10px;
-webkit-border-top-right-radius:20px;
-webkit-border-bottom-right-radius:30px;
-webkit-border-bottom-left-radius:40px;
background-color:skyblue;
padding:20px;
width:180px;
}
原文：http://www.cnblogs.com/xuange306/p/4624042.html