CSS中實現帶圓角的矩形，是網頁設計中經常遇到的一個問題。使用CSS的border-radius屬性可以輕松地解決這個問題。我們可以通過設置border-radius屬性的值來實現想要的圓角程度。

div {
border: 2px solid #000;
border-radius: 10px;
width: 200px;
height: 100px;
}

上面的代碼是創建一個帶10px圓角的矩形。其中，border屬性設置邊框的寬度和顏色，width和height屬性設置寬度和高度。而border-radius屬性則設置圓角的程度。

如果我們想要設置不同程度的圓角，可以單獨設置每一個角的圓角程度。代碼如下：

div {
border: 2px solid #000;
border-top-left-radius: 30px;
border-top-right-radius: 10px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 30px;
width: 200px;
height: 100px;
}

上面的代碼設置了四個角落的圓角程度，從而創建出一個比前面更加復雜的形狀。通過這個屬性的掌握，我們可以輕松地實現一些網頁設計中需要用到的復雜形狀，讓網頁的視覺效果更加出色。