在做網頁設計的時候，常常會要用到圓角，今天來介紹一下好用網站 RoundedCornr ，這個網站讓你簡單的設定後，就可以輕鬆的作出圓角，連圖片、Html及CSS都幫你搞定好了，只要抓回去修改一下就可以用了。

能製作的圓角有

• Basic RoundedCornr： 單色的圓角背景
• RoundedCornr with Gradient： 漸層色的圓角背景
• RoundedCornr with Border： 圓角邊框
• Single RoundedCornr Image： 圓角圖案，可在圖案上面打文字，可以拿來當簡易的按鈕使用。

　　設定好各選項後，按下【Create RounderCornr >>】，就會顯示出一個demo網頁，上面有效果呈現圖，下面則是Html、CSS還有圖檔，下載圖檔到電腦中，再上傳到自己的server上去，修改一下Html還有CSS就可以用了，眼見為憑，下面是一些範例

 

 

 

 

　　也可以做到像上圖這樣，兩個角圓角兩個角直角。

　　目前知道的問題是圓角邊框的範例，當你的內容太多，導致整個區塊的高度太高時，左邊的框線有可能會不夠長，這是因為他的左邊框線和左上角的圓角，是使用一個1024*600的圖片去做的，因此當內容的高度大於他所能顯示的高度的時候，他就會因為圖片不夠大而斷掉了，而他的右框線卻是用另外一個5*1的細線去 repeat-y，因此不管內容多高都可以正確顯示，還有另外一個問題是，當內容太少的時候，內容的高度小於圓角的半徑時，顯示上也有可能出錯，不過這可以透過margin輕易的解決掉。

　　這是用圖片的方法來實現圓角的做法，要做出圓角的方法有很多種，可以只用CSS就達成，但萬惡的網路探險家(IE)，在某些情況下會無法達成效果，因此今天先介紹用圖片的方法，這個是一定可以達成的方法，但是不一定會比較快，也因為要下載圖片，因此對網頁的開啟速度也會有影響。