二、如果角的两个相邻边有不同的宽度，那么这个角将会从宽的边平滑过度到窄的边。其中一条边甚至可以是0。相邻转角是由大向小转。
复制代码
.demo {
border-width: 10px 5px 20px 3px;
border-radius: 30px;
}
效果：
三、相邻两条边颜色和线条样式不同时，那么两条相邻边颜色和样式转变的中心点是在一个和两边宽度成正比的角上。比如，两条边宽度相同，这个点就是一个45°的角上，如果一条边是另外一条边的两倍，那么这个点就在一个30°的角上。界定这个转变的线就是连接在内外曲线上的两个点的直线。我们来看一个四边颜色不一样，宽度不一样的实例：
复制代码
.demo {
border-color: red green blue orange;
border-width: 15px 30px 30px 80px;
border-radius: 50px;
}
效果：
上面这几种是比较特殊点的用法，如果大家还想通过border-radius制作更多不同形状，或者更多的应用，可以点击这里。
border-radius能应用在各种元素中，但在img和table应用时会有点差别的，首先先来看图片上应用border-radius时的情况。在img上应用border-radius到目前只有Firefox4.0+浏览器才正常，而在其他浏览器都不能对图片进行剪切，我们先来看一个实例：
复制代码
img {
border: 5px solid green;
border-radius: 15px;
}
我们来看其在各浏览器下的效果：
左图是在Safari5.0、Google Chrome 10.0、Opera11.1下的效果，我们可以看得出，图片根本就没有圆角效果，右图是在Firefox4.0下的效果，低于这个版本的和左图一样效果，如果需要达成一致效果，大家就必须放弃border-radius而采用CSS2制作圆角的老办法。另外table的样式属性border-collapse是collapse时,border-radius不能正常显示,只有border-collapse: separate;时才能正常显示。
复制代码
table {
border-collapse: collapse;
border: 2px solid red;
background: green;
border-radius: 15px;
}
效果：
那么到此，我们border-radius的一些用法就介绍完了。希望能给大家带来一点帮助，感兴趣的朋友可以观注本站后面的内容，我们下节将介绍CSS3中的文字阴影：text-shadow的用法。更希望感兴趣的朋友一起探讨和学习CSS3更多的技术知识。
