<div>元素是HTML中的一個常用標簽，用于定義文檔中的一個塊級區域。它可以用來創建容器，將其中包含的內容分離到文檔中的不同區域。除了默認的直角邊框外，<div>元素還可以通過添加弧度來改變其外觀，使其具有圓角效果。這種外觀變化可以通過CSS中的border-radius屬性輕松實現。在本文中，我們將通過幾個代碼案例，詳細說明如何使用border-radius屬性給<div>元素添加弧度。

要創建帶有弧度的<div>元素，我們需要在CSS中使用border-radius屬性。該屬性接受一個長度值或百分比值作為參數，用于指定圓角的半徑大小。我們可以在border-radius屬性中指定一個值，表示四個圓角的半徑都相同，也可以通過指定四個不同的值，分別對應于左上角、右上角、右下角和左下角的圓角弧度。

<div style="border-radius: 10px;">圓角半徑為10像素的<div>元素</div></div>

在上面的示例中，我們為<div>元素設置了一個圓角半徑為10像素的邊框。這樣，<div>元素的四個角將呈現出圓角效果，而不是默認的直角邊框。我們可以通過改變border-radius屬性的值，調整圓角半徑的大小，以滿足我們的需求。

<div style="border-radius: 50%;">圓角半徑為50%的<div>元素</div></div>

上述代碼中，我們為<div>元素設置了一個圓角半徑為50%的邊框。這樣，<div>元素的所有角都將呈現出相同大小的圓角效果。通過設置半徑為百分比值，我們可以使圓角的大小隨著<div>元素的尺寸而自適應。

<div style="border-radius: 20px 10px;">左上角和右下角圓角半徑分別為20像素和10像素的<div>元素</div></div>

在上面的代碼中，我們為<div>元素設置了兩個不同的圓角半徑值。通過指定四個值中的前兩個值，我們可以分別設置左上角和右下角的圓角半徑。這樣，<div>元素的左上角和右下角將呈現出不同大小的圓角效果，而左下角和右上角的圓角將使用border-radius屬性中的默認值。

通過使用CSS中的border-radius屬性，我們可以輕松地給<div>元素添加弧度，從而改變其外觀。我們可以根據設計需要設置不同大小的圓角半徑，或者使用百分比值來實現自適應的圓角效果。這樣，我們可以更加靈活地定義和定制頁面中的元素樣式。