如果想要設計一個4方型的圓弧外框，除了用 Photoshop 畫一個然後切板貼入，更快的方式是透過CSS3的相關語法來實現，或是透過以下的CSS圓角產生器網址來產生語法：
 

1、圓角產生器網址：http://border-radius.com/

2、輸入4角弧狀參數。

3、直接複製產生器中的CSS語法。

4、將弧形語法貼到目前為正方型區塊的語法之中

例如目前的正方型區塊CSS語法：

.demo {
position:              relative;
width: 100px;
height: 100px;
background: #D82F2F url(../img/about/) no-repeat left top;
}

貼入弧形語法

.demo {
position:              relative;
width: 100px;
height: 100px;
background: #D82F2F url(../img/about/) no-repeat left top;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}

這樣就立刻產生了一個100*100PX大小的圓弧區塊。

教學撰寫：徐嘉裕 Neil hsu