CSS3 的 border-radius- 圓角屬性

在 css3 之後我們可以很快的利用 border-radius 這個屬性來幫我們替元素設置圓角，基本用法如下：

border-radius: 10px;

這樣就是簡單地替四個邊都設置 10px 的圓角，這個 10px 的意思是在角的部分塞一個半徑 10px 的圓。

除了絕對單位外，還可以設置相對單位，這邊我們用 20%，就會以鄰近的邊長度的 20% 做成圓角：

border-radius: 20%;

要做圓形的話只要設 50% 就好了，注意這邊由於是以鄰近的邊當參考基準，所以如果是長方形的就會變成橢圓形。

border-radius: 50%;

一個值的話四邊都會一樣，若設定四個值的話則會從左上角開始順時針轉一圈設定四個角

border-radius: 10px 20px 30px 40px;

三個值的話第四個角會用第二個角補，兩個值的話第一個值為第一、三個角，第二個值為第二、四個角。

border-radius: 10px 20px 50px;

border-radius: 10px 50px;

另外可以使用分數的形式，會做成橢圓的圓角，像以下的寫法就是在角落塞一個長軸 80px 短軸 20px 的橢圓。

border-radius: 20px/80px;