-moz-border-radius-bottomright: <length> <length> //右下角
-moz-border-radius-bottomleft: <length> <length> //左下角
-webkit-border-top-left-radius: <length> <length> //左上角
-webkit-border-top-right-radius: <length> <length> //右上角
-webkit-border-bottom-right-radius: <length> <length> //右下角
-webkit-border-bottom-left-radius: <length> <length> // 左下角
border-top-left-radius: <length> <length> //左上角
border-top-right-radius: <length> <length> //右上角
border-bottom-right-radius: <length> <length> //右下角
border-bottom-left-radius: <length> <length> //左下角
另外需要特别注意的是，border-radius一定要放置在-moz-border-radius和-webkit-border-radius后面，（特别声明：本文中所讲实例都只写了标准语法格式，如果你的版本不是上面所提到的几个版本，如要正常显示效果，请更新浏览器版本，或者在border-radius前面加上相应的内核前缀，在实际应用中最好加上各种版本内核浏览器前缀。）
我们初步来看一个实例：
HTML代码：
复制代码
<div class=”demo” ></div>
为了更好的看出效果，我们给这个demo添加一点样式：
复制代码
.demo {
width: 150px;
height: 80px;
border: 2px solid #f36;
background: #ccc;
}
注：如无特殊声明，本文实例所有基本代码格式如上所示，只在该元素上添加border-radius属性设置。
复制代码
.demo {
border-radius: 10px 15px 20px 30px / 20px 30px 10px 15px;
}
这种写法我们前面有提到过，“/”前是指圆角的水平半径，而“/”后是指圆角的垂直半径，他们两都遵循TRBL的顺序原则。为了能让大家更清楚理解，我们把上面代码换成如下：
复制代码
.demo {
border-top-left-radius: 10px 20px;
border-top-right-radius: 15px 30px;
border-bottom-right-radius: 20px 10px;
border-bottom-left-radius: 30px 15px;
}
不仿看看他们的效果：
三、支持的浏览器：
上面我们介绍了border-radius的基本用法，以及在各大浏览器下的格式等，下面我们通过实例来介绍其具体的用法：
一：border-radius只有一个取值时，四个角具有相同的圆角设置，其效果是一致的：
复制代码
.demo {
border-radius: 10px;
}
其等价于：
.demo{
border-top-left-radius: 10px;
border-top-right-radius: 10px;
