在 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;
