在网页的展示效果中，为了好看，往往需要将边框设置为圆角的，比如百度的搜索框和按钮都是圆角的。
在以往的方案中，可以搞一个背景图片，将它设置为圆角，但是随着css3的出现，可以直接使用css的border-radius属性来设置圆角的边框。
border-radius属性出现，因为不用搞背景图片了，这样省了一些不必要的麻烦，也可以加快网站的打开速度。
语法
border-radius: value属性值
它只需要设置一个值value就可以设置4个角，value的值代表边框的半径,也就是说value值越大，越圆润。value值单位可以为em、ex、pt、px、百分比等。
多边框定义
如果你想分别设置4个角不同的效果也是可以的。
它和css中的padding和margin属性类似，如下。
- 1. 四个值。左上，右上，右下，左下。例如：border-radius: 15px 5px 25px 0px;
- 2. 三个值：左上，右上右下，左下。 例如：border-radius: 15px 5px 25px;
- 3. 两个值：左上右下 和 右上左下。例如：border-radius: 15px 5px;
- 4. 一个值：设置4个角。例如：border-radius: 15px;
当然，border圆角也有4个角分别设置的属性值，它们分别是：
| 属性 | 说明 |
|---|---|
| border-top-left-radius | 左上 |
| border-top-right-radius | 右上 |
| border-bottom-right-radius | 右下 |
| border-bottom-left-radius | 左下 |
显然这样写有点麻烦，因此，它不是常用的方法。
例子
<!DOCTYPE html>
<html>
<title>css 圆角边框 border-radius</title>
<head>
<style>
div
{
text-align:center;
color:#fff;
float:left;
margin-left:10px;
width:150px;
height:105px;
background:orange;
}
.div1{border-radius:15px;}
.div2{border-radius: 15px 5px;}
.div3{border-radius: 15px 5px 25px;}
.div4{border-radius: 15px 5px 25px 0px;}
</style>
</head>
<body>
<h3>yxjc123.com 圆角边框例子</h3>
<div class="div1">1个值</div>
<div class="div2">2个值</div>
<div class="div3">3个值</div>
<div class="div4">4个值</div>
</body>
</html>输出：
