在CSS3推出之前定義圓角邊框需要借住背景圖片來完成，CSS3新增了border-radius定義圓角邊框?qū)傩?，用它可以直接?義各類圓角邊框，從此定義圓角邊框不需要再借住背景圖片。

border-radius屬性是在原來CSS2.1的 border 的后面加了一個 radius（半徑），在這里也就是圓角邊框的意思。為了便 于理解，我們先粗略的看 border-radius 的語法規(guī)則，然后再看具體實例，自已操練一翻就掌握了。

一、border-radius的語法規(guī)則如下：

border-radius：[ | ]{1,4} [ / [ | ] {1,4} ]?

規(guī)則說明：

1、border-radius 最多有兩個參數(shù)，它們用 / 分隔；前一個參數(shù)表示水平半徑（必選），后一個參數(shù)表示垂直半徑（可 選）；如果后一個參數(shù)省略，則默認使用前一個參數(shù)值；

2、每個參數(shù)既可以用具體數(shù)字設(shè)置又可以用百分比設(shè)置；

length：表示用具體數(shù)值設(shè)置半徑長度；

percentage：表示用百分比設(shè)置半徑長度；

3、花括號中的值（{1,4}）表示半徑的取值范圍，無論是水平半徑還是垂直半徑都可以取1到4個值，取不同值的含義如下 （以水平半徑為例）：

1）只設(shè)置一個數(shù)值，側(cè)四個角都用該值；

2）設(shè)置兩個數(shù)值，側(cè)每個值用于其對角，即第一個用于 top-left（上左）和 bottom-right（下右），第二個用于 top-right（上右）和 bottom-left（下左）；

3）設(shè)置三個數(shù)值，第一個和第三個用于其對角，第二個用于兩個角，即第一個用于 top-left（上左），第二個用于 top-right（上右）和 bottom-left（下左），第三個用于 bottom-right（下右）；

4）設(shè)置四個數(shù)值，第一個用于 top-left（上左），第二個用于 top-right（上右），第三個用于 bottom-right（下右 ），第四個用于 bottom-left（下左）；

其實這些順序不用記，當設(shè)置這些值時，網(wǎng)站開發(fā)環(huán)境（如 Visual Studio）通常會自動提示。

二、border-radius定義圓角邊框?qū)嵗?/p>

border-radius的參數(shù)分為水平半徑和垂直半徑，而它們又有一到四個參數(shù)，為便于預(yù)覽不同參數(shù)的圓角邊框效果，每種 情況都舉一個實例。

1、只設(shè)置水平半徑

html 代碼：

效果圖：

2、設(shè)置水平半徑和垂直半徑

html 代碼：

效果圖：