在製作網頁的過程中，有時我們可能需要實現圓角的效果，以前的做法是透過切圖（將設計稿切成便於製作成頁面的圖片），使用多個背景圖像來實現圓角。在CSS3 出現之後就不需要這麼麻煩了，CSS3 中提供了一系列屬性來設定元素的圓角效果，如下所示：
上述函數的可選值如下表所示：
border-radius用來實現圓角邊框。
舉例：
<html><head><style>div{width:300px;height:300px;border:1pxsolidred;border-radius:20px;}</style></head><body><div></div></ body></html>運行結果：
但是如果我把border-radius設為150px，就會變成圓形邊框
<html><head><style>div{width:300px;height:300px;border:1pxsolidred;border-radius:150px;}</style></head><body><div></div></ body></html>運行結果：
為了方便，直接把border-radius設為50%也行。效果是一樣的。
但是如果想畫圓，則width和height必須相等。
事實上，border-radius後可以接多個屬性值，像上面的一個屬性值則預設四角都為該屬性值，若是四個屬性值顯然是與四角相對，這麼個相對法呢？從左上角開始，順時針一一對應。
舉例說明：
<html><head><style>div{width:300px;height:300px;border:1pxsolidblack;background:rgb(0,162,255);border-radius:50px0px20px100px;}</body></head><body<div> ></div></body></html>運行結果：
舉例畫個雞蛋吧：
<html><head><style>div{width:80px;height:100px;border:1pxsolidblack;background:rgb(0,162,255);border-radius:40px40px40px40px/60px60px/60px60px40pxbody> <div></div></body></html>運行結果：
