此特徵可用來作元素矩形格子的圓角。這是 CSS3 建議的特徵，發展還不成熟。Safari, Chrome 用 -webkit-border-radius；Firefox 用 -moz-border-radius。IE 無此項。可設的值有：
- 圓角半徑：可設一至四個圓角半徑，半徑值可是 長度 或 百分比；百分比是相對於矩格的寬度。四個半徑值的順序是：左上，右上，右下，左下；少於四個值時，取對角相同。
在 Safari, Chrome 可設兩個長度值，依序是圓角的水平與垂直半徑；四個角使用相同的水平與垂直半徑。只設一個值時，水平與垂直半徑相同。Safari, Chrome 不能使用百分比。
- inherit：繼承父元素特徵。
- 風格用法：
<style type="text/css">
.cnr4 {-moz-border-radius: 10px 20px 40%;
-webkit-border-radius: 20px 40px;
width: 100px;
height:80px;
border:dashed 1px white;
background:blue;
}
</style>
<p class=cnr4>圓角</p> - 執行結果：
圓角
可以設定個別角：
- 左上角：-moz-border-radius-topleft，-webkit-border-top-left-radius。
- 右上角：-moz-border-radius-topright，-webkit-border-top-right-radius。
- 右下角：-moz-border-radius-bottomright，-webkit-border-bottom-right-radius。
- 左下角：-moz-border-radius-bottomleft，-webkit-border-bottom-left-radius。
- 風格用法：
<style type="text/css">
.cnr {width: 100px;
height:80px;
border:groove 8px red;
float:left;
margin-left:10px;
background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmkRzQhhtbzJZB2AZE3Ud_K4poNGAX7hjwO2OoBd8SNHhRMffYRfw9qSeNFexU7Ujwl_U6lb2RYPn3Dc4kJ8d8zE5LnmY2Gz6CMS7I37b1PUw5fYZLQIcEIxMI8Dqv2mYFEjEawXtTJZs/s200/shape.jpg");
background-position:60px 50px;
}
</style>
<p style='-moz-border-radius-topleft:40px;
-webkit-border-top-left-radius:40px' class=cnr>
左上角</p>
<p style='-moz-border-radius-topright:40px;
-webkit-border-top-right-radius:40px' class=cnr>
右上角</p>
<p style='-moz-border-radius-bottomright:40px;
-webkit-border-bottom-right-radius:40px' class=cnr>
右下角</p>
<p style='-moz-border-radius-bottomleft:40px;
-webkit-border-bottom-left-radius:40px' class=cnr>
左下角</p>
<p style='-moz-border-radius-topleft:10px;
-webkit-border-top-left-radius:10px;
-moz-border-radius-topright:20px;
-webkit-border-top-right-radius:20px;
-moz-border-radius-bottomright:30px;
-webkit-border-bottom-right-radius:30px;
-moz-border-radius-bottomleft:40px;
-webkit-border-bottom-left-radius:40px' class=cnr>
圓角</p> - 執行結果：
左上角
右上角
右下角
左下角
圓角
:HOVER, :ACTIVE 的應用。使用時要注意，在 IE6 中 :HOVER, :ACTIVE 只能用在 ANCHOR 元素。
- 風格用法：
<style type="text/css">
.hvr {-moz-border-radius: 10px 10px 40%;
-webkit-border-radius: 10px;
width: 100px;
height:80px;
/*border:solid 1px white;*/
background:green;
border-style:none;
}
.hvr:hover
{-moz-border-radius: 10px 30px 40%;
-webkit-border-radius: 20px;
}
.hvr:active
{-moz-border-radius: 10px 50% 5%;
-webkit-border-radius: 40px;
}
</style>
<p class=hvr>圓角</p> - 執行結果：
圓角
javascript 應用。可以用 style 物件 的特徵 MozBorderRadius 作動態變化。此範例使用到 toggleCSS()。此範例適用於 Firefox。實測時發現，Safari, Chrome 可以用 webkitBorderRadius 改變圓角，但是卻不能讀出值。
- 風格用法：
<p id='test1' class=cnr4>圓角</p>
<script type='text/javascript'>
function toggleCSS(id, pty, v1, v2, ms)
{
var os=document.getElementById(id).style;
os[pty]= (os[pty] == v1 ) ? v2 : v1;
setTimeout('toggleCSS("'+id+'","'+pty+'","'+v1+'","'+v2+'",'+ms+')', ms);
}
toggleCSS("test1", "MozBorderRadius", "5px 40px 5px 40px", "40px 5px 40px 5px", 500);
</script> - 執行結果：
圓角
