下面是我用html+css執行出來的結果，圖片的圓角在不同的位置：
對應的代碼如下：
1 <html> 2 <head> 3 <title>my first text html</title> 4 <style type="text/css"> 5 .yuanjiao{ 6 width:400px; 7 height:100px; 8 text-align:center; 9 background:#33CC33; 10 border-radius:15px; 11 margin-bottom:10px; 12 } 13 .yuanjiaozuoshang{ 14 width:400px; 15 height:100px; 16 text-align:center; 17 background:#33CC33; 18 border-top-left-radius:15px; 19 margin-bottom:10px; 20 } 21 .yuanjiaoyoushang{ 22 width:400px; 23 height:100px; 24 text-align:center; 25 background:#33CC33; 26 border-top-right-radius:15px; 27 margin-bottom:10px; 28 } 29 .yuanjiaozuoshangyouxia{ 30 width:400px; 31 height:100px; 32 text-align:center; 33 background:#33CC33; 34 border-radius:15px 0px; 35 margin-bottom:10px; 36 } 37 </style> 38 </head> 39 <body> 40 <div class="yuanjiao">圓角</div> 41 <div class="yuanjiaozuoshang">左上圓角</div> 42 <div class="yuanjiaoyoushang">右上圓角</div> 43 <div class="yuanjiaozuoshangyouxia">左上右下圓角</div> 44 </body> 45 </html>
通過以上的代碼，大家應該對定義圓角的規則有初步的了解了，下面我就來總結一下定義規則：
一、針對不同的瀏覽器，css語句不同
1 -moz-border-radius:10px; /*僅firefox支持，實現圓角效果*/ 2 -webkit-border-radius:10px; /*僅safari，chrome支持，實現圓角效果*/ 3 -khtml-border-radius:10px; /*僅safari，chrome支持，實現圓角效果*/ 4 border-radius:10px; /*僅firefox，opera，safari，chrome支持，實現圓角效果*/
目前來說，只需同時設置以下代碼即可
-moz-border-radius:10px;
border-radius:10px; /*border-radius必須放在最后聲明，否則可能會失效*/
二、border-radius:10px;（圓角半徑包括水平半徑和垂直半徑）
三、圓角總共有四個：左上 右上 右下 左下，這也是我們定義圓角半徑的順序
1、只有一個值，是定義四個圓角半徑，如:border-radius:10px;
2、有兩個值，第一個值是定義左上和右下，第二個值是定義左下和右上，如:border-radius:10px 15px;
3、有三個值，第一個值是定義左上，第二個值是定義左下和右上，第三個值是定義右下，如:border-radius:10px 15px 8px;
四、我們也可以單獨定義一個圓角
1、定義左上圓角，border-top-left-radius:15px;或者-moz-border-radius-topleft:10px;
2、定義右上圓角，border-top-right-radius:15px;或者-moz-border-radius-topright:10px;
3、定義右下圓角，border-bottom-right-radius:15px;或者-moz-border-radius-bottomright:10px;
4、定義左下圓角，border-bottom-left-radius:15px;或者-moz-border-radius-bottomleft:10px;
五、我們也可以對同一個或幾個圓角分別定義水平半徑和垂直半徑
border-radius:10px（水平半徑）/15px（垂直半徑）