border-radius是CSS3設定圓角的一個屬性，其屬性值得單位可以使用：em、px、百分比等等。但是，border-radius屬性值得引數形式有好多種，那麼具體都代表什麼意思呢？下面以實際例子分析一下：

首先是最常見的一種形式，一個值：border-radius: 值；

border-radius: 10px;

    這段程式碼代表同時將元素的每個圓角的"水平半徑"和"垂直半徑"都設定為10px。

    border-radius可以同時設定1到4個值，（類似於margin與padding的值得設定）。如果設定四個值，則依次對應左上角、右上角、右下角、左下角（順時針順序）。

程式碼：

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

    如果設定兩個值，表示左上角和右下角使用第一個值，右上角和左下角使用第二個值。

程式碼：

border-radius: 20px 0px;

    如果設定三個值，表示左上角使用第一個值，右上角和左下角使用第二個值，右下角使用第三個值。

程式碼：

border-radius: 10px 0px 50px;

    border-radius還可以用斜槓二組值。這時，第一組值表示水平半徑，第二組值表示垂直半徑。每組值也可以同時設定1到4個值，應用規則是依次對應左上角、右上角、右下角、左下角（順時針順序）。

程式碼：

border-radius:50px/30px;

程式碼：

border-radius: 50px 30px 20px 10px / 20px 30px 20px 30px;

    除了可以同時設定四個圓角以外，還可以單獨對每個角進行設定。對應四個角，CSS3提供四個單獨的屬性： 　　 border-top-left-radius 　　 border-top-right-radius 　　 border-bottom-right-radius 　　 border-bottom-left-radius     這四個屬性都可以同時設定1到2個值。如果設定1個值，表示水平半徑與垂直半徑相等。如果設定2個值，第一個值表示水平半徑，第二個值表示垂直半徑。 程式碼：

border-top-right-radius: 50px;
 

border-top-right-radius: 50px 20px;