圓角矩形是我們經常用到的圖形之一，在CSS中使用border-radius屬性進行設置。border-radius屬性定義圓角，并且可以為每個角單獨設置圓角半徑。

首先，我們可以設置所有四個角的圓角半徑為相同的值：

.example {
width: 200px;
height: 100px;
border-radius: 10px;
background-color: #ccc;
}

上面的樣式會使得一個寬度為200px，高度為100px的矩形以10px的圓角呈現出來。如果希望只設置部分角的圓角半徑，則可使用以下寫法：

.example2 {
width: 200px;
height: 100px;
border-radius: 10px 20px 30px 40px;
background-color: #ccc;
}

這種寫法會使得左上角、右上角、右下角和左下角的圓角半徑分別設置為10px、20px、30px和40px。如果希望左上角和右下角的圓角半徑相同，而右上角和左下角的圓角半徑相同，則可使用以下寫法：

.example3 {
width: 200px;
height: 100px;
border-top-left-radius: 10px;
border-top-right-radius: 20px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 20px;
background-color: #ccc;
}

上面的寫法會使得左上角和右下角的圓角半徑設置為10px，右上角和左下角的圓角半徑設置為20px。由于CSS3為我們提供了很多便利的屬性值，我們現在也可以設置橢圓形的圓角矩形，只需要將border-radius改為border-radius: 50% / 25%;即可。