圆角边框是css3新增属性，在圆角边框出现之前，前端开发有的采用整块的圆角图片作为背景，有的采用小的圆角图片分别放在元素的四角，非常麻烦，下面我们来看一下如何使用css设置圆角边框。
圆角边框(border-radius)的基本用法：
圆角边框的最基本用法就是设置四个相同弧度的圆角boder-top-left-radius：30px； //左上角boder-top-right-radius：30px； //右上角boder-bottom-left-radius：30px； //右下角boder-bottom-right-radius：30px； //左下角
如果这四个弧度的圆角相同，可以写成：border-radius：30px；
css设置圆角边框：
css部分：.div1{
margin:0 auto;
background: darkcyan;
width:200px;
height:200px;
border:2px solid darkslategray;
border-radius:30px;
text-align: center;
line-height: 200px;
}
html部分：
圆角边框
效果如图：
设置不同弧度的圆角
例子：
css部分：#box4{
width:500px;
position: relative;
margin:30px auto;
}
.div4,.div5,.div6,.div7{
width:200px;
height:200px;
text-align: center;
color:seagreen;
font-size: 26px;
line-height: 200px;
background: yellowgreen;
border:2px solid darkslategray;
float:left;
margin:20px;
}
.div4{border-top-left-radius: 40px;}
.div5{border-top-right-radius: 20px;}
.div6{border-bottom-left-radius: 30px;}
.div7{border-bottom-right-radius: 10px;}
HTML部分：
左上角为圆角右上角为圆角右下角为圆角左下角为圆角
效果如图：
