| 将会从宽的边平滑过度到窄的边。其中一条边甚至可以是0。
两条相邻边颜色和样式转变的中心点是在一个和两边宽度成正比的角上。比如，两条边宽度相同，这个点就是一个45°的角上，如果一条边是另外一条边的两倍，那么这个点就在一个30°的角上。界定这个转变的线就是连接在内外曲线上的两个点的直线
角不允许相互重叠，所以当相邻两个角半径的和大于所在矩形区域的大小时，用户代理（浏览器）比如缩小一个或多个角半径。运算法则如下：f = min(Li/Si)，i ∈ {top, right, bottom, left}，Ltop = Lbottom = 所在矩形区域的宽，Lleft = Lright = 所在矩形区域的高。如果f < 1，那么所有角半径都乘以f。
浏览器支持
实际中，目前没有任何一款浏览器支持这个属性，只有部分浏览器利用其私有属性支持部分实现：
- Firefox对border-radius的支持：
-moz-border-radius: <length>{1,4} | inherit
-moz-border-radius-bottomleft : <length> | inherit
-moz-border-radius-bottomright : <length> | inherit
-moz-border-radius-topleft : <length> | inherit
-moz-border-radius-topright : <length> | inherit
- 只对每个角设置一个半径，只支持实现四分之一圆角，并不支持椭圆形圆角。
- 具体每个角的命名规则也和W3C不一致，这个比较讨厌。
- Firefox3圆角已经相当圆滑了，Firefox2比较糟糕，好在它即将终结了。
- Safari和Chrome对border-radius的支持：
-webkit-border-radius: <length>{1,2} | inherit
-webkit-border-bottom-left-radius : <length>{1,2} | inherit
-webkit-border-bottom-right-radius : <length>{1,2} | inherit
-webkit-border-top-left-radius : <length>{1,2} | inherit
-webkit-border-top-right-radius : <length>{1,2} | inherit
- 每个属性有1个或2个值，当有两个值时1个表示水平半径，一个表示垂直半径writing-mode改变也随之而变）。所以，Safari和Chrome中的圆角可以是椭圆角。
- webkit的实现方法和 W3C的CSS3草案2005年版本 非常一致，和当前的草案最大不同就是简写属性-webkit-border-radius的属性值也只有1个或2个值，意义和前面相同。
- Chrome中圆角锯齿比较严重，基本上和Firefox2是同一水平，或许是它的webkit版本较低造成的。
- 由于
|
