CSS圓角邊框是一種非常常用的樣式設(shè)計(jì)，它是通過border-radius屬性實(shí)現(xiàn)的。使用border-radius屬性，我們可以將一個(gè)矩形的角變成圓角，或者將一條邊緣甚至多條邊緣變成圓弧或橢圓弧形狀，從而創(chuàng)造出各種不同的視覺效果。

/* 語法 */
border-radius: 上左 上右 下右 下左;
/* 示例 */
border-radius: 10px; /* 四個(gè)角都是10像素的圓角 */
border-radius: 10px 20px;  /* 左上角和右下角是10像素的圓角，右上角和左下角是20像素的圓角 */
border-radius: 10px 20px 30px;  /* 左上角是10像素的圓角，右上角和左下角是20像素的圓角，右下角是30像素的圓角 */
border-radius: 10px 20px 30px 40px;  /* 分別指定左上、右上、右下、左下的四個(gè)角，像素值依次為10px、20px、30px、40px */
border-radius: 50%; /* 四個(gè)角都是50%即是圓形 */
border-radius: 0 0 50% 50%; /* 等價(jià)于 border-radius: 0 0 50px 50px，即元素的下左角和下右角是50%的圓角 */
border-radius: 10px / 20px;  /* 為不同的軸指定不同的半徑 */

需要注意的是，如果border-radius的值不是一個(gè)單一的像素值，而是一個(gè)百分比值，那么它的表現(xiàn)會與元素的溢出的輪廓相應(yīng)地改變。border-radius除了接受一個(gè)數(shù)值外還能接受一個(gè)長度。長度就是一個(gè)具體的像素值。如果border-radius屬性后面跟的是兩個(gè)數(shù)值，表示水平半徑和垂直半徑（當(dāng)然，圓形的話就是完全一樣的半徑）；如果border-radius屬性后面跟的是四個(gè)數(shù)值，表示左上、右上、右下、左下四個(gè)角取值。同時(shí)我們也可以使用斜桿”/”將兩個(gè)半徑分開。分開的話，前面的是水平方向的半徑，后面的是垂直方向的。