在網頁設計時，頁面中圓角的實現一直是個很難解決的問題，雖然現在有很多種實現方法，但都是比較麻煩的，這里想通過此例介紹一種CSS新技術，即CSS新的屬性border-radius來實現網頁設計中的圖片的圓角化。
【操作步驟】
第1步，啟動Dreamweaver，新建文檔，保存為index.html。
第2步，首先構建網頁結構，網頁結構非常簡單，就是在網頁添加了4張圖片。
<img class="a" src="images/1.jpg"/>
<img class="a" src="images/2.jpg"/>
<img class="a" src="images/3.jpg"/>
<img class="a" src="images/4.jpg"/>
第3步，定義網頁的基本屬性。
body { margin: 20px; padding: 20px;}
在以上的代碼中設置了網頁四周的補白為20px，用padding了網頁的內邊距為20px，設置為居中。
第4步，運用border-radius屬性設置圓角圖片。
.a {
width: 150px;
height: 150px;
border: 1px solid gray;
-moz-border-radius: 10px; /*僅Firefox支持，實現圓角效果*/
-webkit-border-radius: 10px; /*僅Safari，Chrome支持，實現圓角效果*/
-khtml-border-radius: 10px; /*僅Safari，Chrome支持，實現圓角效果*/
border-radius: 10px; /*Firefox，Opera，Safari，Chrome支持，實現圓角效果*/}
在以上代碼中，首先定義了圖片的寬度和高度，接著設置了圖片的邊框樣式，然后用border-radius定義了圖片的圓角。
提示：border-radius屬性的作用分別如下。
?最多可以設置4個值，分別是矩形4個圓角的半徑，如border-radius:10px，表示4個角都為圓角，且每個圓角的半徑都為10px。
?也可以設置兩個值，如border-ra-dius:10px 5px，第1個值代表左上圓角和右下圓角，第2個值代表右上圓角和左下圓角。
?如果設置3個值，如border-radius:10px5px 1px，第1個值代表左上圓角，第2個值代表右上圓角和左下圓角，第3個值代表右下圓角。 上圓角、右上圓角、右下圓角和左下圓角。
?也可以將4個角拆分成4個單獨的屬性來設置：左上圓角：border-top-left-radius、右上圓角：border-top-right-radius，右下圓角：border-bottom-right-radius，左下圓角：border-bottom-left-radius。如IE8及其以下版本瀏覽器就不能支持這種技術，所以在使用它的時候還要考慮到瀏覽器的兼容問題。
?如果設置了4個值，如border-ra-dius:10px 9px 8px 7px，4個值分別代表左上圓角、右上圓角、右下圓角和左下圓角。
?也可以將4個角拆分成4個單獨的屬性來設置：左上圓角：border-top-left-radius、右上圓角：border-top-right-radius，右下圓角：border-bottom-right-radius，左下圓角：border-bottom-left-radius。如IE8及其以下版本瀏覽器就不能支持這種技術，所以在網頁設計的時候還要考慮到瀏覽器的兼容問題。