在網頁設計中，常常會用到背景框來實現頁面元素的裝飾和分割，但是簡單的矩形框顯得過于平凡，容易使整個頁面失去美感。為了解決這個問題，CSS 提供了一個非常有用的屬性來實現背景框的圓角效果，那就是 border-radius。

.box {
width: 200px;
height: 200px;
background-color: #f1c40f;
border-radius: 20px;
}

在上面的代碼中，我們定義了一個類名為“box”的元素，它的寬高都是 200px，背景顏色是淡黃色。通過使用 border-radius 屬性，我們把框的四個角設置成了 20px 的圓角。我們可以根據實際情況來設置不同的值，來達到不同的效果。

如果想將某個角的圓角效果取消，可以針對該角單獨設置：

.box {
width: 200px;
height: 200px;
background-color: #f1c40f;
border-top-left-radius: 20px;
border-top-right-radius: 30px;
border-bottom-right-radius: 40px;
}

上述代碼中，我們選擇性地設置了四個圓角的半徑，來得到更加復雜的效果。

除了使用具體的像素值來設置圓角半徑，還可以使用百分比：

.box {
width: 200px;
height: 200px;
background-color: #f1c40f;
border-radius: 50%;
}

在這種情況下，框的四個角將會變成圓形。

除了應用于背景框，border-radius 屬性還能用來實現 CSS3 的其他特性，像是圖片的圓角等。