CSS是前端界最常用的樣式表語言，它可以幫助我們實現頁面的美化和交互。其中，圓角矩形樣式是網頁設計中常用的一種樣式，下面我們來看看如何利用CSS實現圓角矩形樣式。

/* CSS代碼 */
.rounded {
border-radius: 10px; 
/* 圓角的大小，單位為像素 */
background-color: #f2f2f2; 
/* 矩形的背景顏色 */
padding: 20px; 
/* 矩形內邊距大小，單位為像素 */
}

代碼中，我們利用了CSS3的border-radius屬性來實現圓角矩形樣式。它可以指定每個角的圓角大小，也可以用一個數值指代所有邊的大小。

同時，我們還利用了background-color屬性來設置矩形的背景顏色，padding屬性來設置矩形內邊距的大小。

具體實現效果如下：

除此之外，我們還可以使用CSS的偽元素來實現更多樣式的圓角矩形。比如，我們可以給一個元素設置一個圓形的邊框，并在其中嵌入一個矩形。實現代碼如下：

/* CSS代碼 */
.rounded-border {
border-radius: 50%; 
/* 圓形邊框的大小為元素寬度的50% */
width: 200px;
height: 200px;
position: relative; 
/* 使偽元素的定位相對于該元素進行 */
}
.rounded-border:before {
content: "";
display: block;
position: absolute; 
/* 使偽元素的定位與元素位置無關 */
top: 10px;
bottom: 10px;
left: 10px;
right: 10px;
background-color: #f2f2f2; 
/* 內部矩形的背景顏色 */
border-radius: 10px; 
/* 矩形的圓角大小 */
}

具體實現效果如下：

以上就是關于CSS圓角矩形樣式的介紹，希望能夠幫助大家更好地運用CSS制作網頁的樣式。