CSS3 圓角 border-radius

CSS3 圓角 border-radius 用來設定區塊的圓角效果，可以一次設定四個圓角的值，也可以分別對各個圓角設定不同的値。

基本語法

border-radius：圓角值;

在此基本語法範例中，圓角值可以自行設定，馬上來看一個簡單範例

<div style="border:2px #ccc solid;border-radius:10px;width:360px;height:60px;background-color:#eee;">CSS3 border-radius 圓角範例</div>

呈現結果

CSS3 border-radius 圓角範例

此範例我們設定了 border-radius:10px 這樣的圓角值（紅色部分），而且四個角都是一樣的效果呈現，另外我們還使用了其它的語法，像是 DIV 的 width（寬度）、height（高度）、background-color（背景顏色）與 border（邊框）等，目的僅是要讓範例呈現明確的效果而已，大部分的應用看到這裡應該就夠用了，但如果你需要進一步，分別設定四個角不同的値也可以。

四個角的語法

border-top-left-radius - 設定左上角
border-top-right-radius - 設定右上角
border-bottom-right-radius - 設定右下角
border-bottom-left-radius - 設定左下角

在 CSS3 圓角設定的時候，可以採用的値有 % 或是長度單位，請自行嘗試看看。

延伸閱讀
CSS border 屬性介紹與範列
CSS border-width 邊框寬度應用
CSS border-color 屬性與用法範例
CSS border-style 邊框樣式屬性介紹與範例
CSS background 背景屬性介紹
CSS background-color 屬性與用法介紹