<div>是HTML中常用的一個元素，用于創建一個獨立的區塊，可以包含其他元素。在HTML中，我們可以使用CSS來為<div>元素添加樣式，其中包括邊框樣式。本文將重點介紹如何使用CSS為<div>元素創建圓形邊框。
在CSS中，我們可以使用border-radius屬性來設置邊框的圓角樣式。默認情況下，這個屬性的值為0，即邊框的圓角為直角。如果我們希望邊框變成圓形，我們可以將border-radius屬性的值設置為50%。這樣，<div>元素的邊框就會呈現圓形的外觀。
下面是幾個代碼案例，詳細解釋了如何使用border-radius屬性為<div>元素創建圓形邊框。
案例一：

<div style="width: 100px; height: 100px; border: 2px solid black; border-radius: 50%;"></div>

在這個案例中，我們創建了一個大小為100x100像素的<div>元素，邊框的寬度為2像素，顏色為黑色。通過設置border-radius屬性的值為50%，我們將邊框的圓角設置為50%寬度。
案例二：

<style>
.circle {
width: 200px;
height: 200px;
border: 1px solid red;
border-radius: 50%;
}
</style>
<div class="circle"></div>

在這個案例中，我們使用了CSS類的方式為<div>元素添加樣式。通過設置.circle類的border-radius屬性的值為50%，我們將<div>元素的邊框變成了圓形，并且邊框的寬度為1像素，顏色為紅色。
案例三：

<style>
.oval {
width: 300px;
height: 200px;
border: 2px dotted blue;
border-radius: 50%;
}
</style>
<div class="oval"></div>

在這個案例中，我們創建了一個大小為300x200像素的<div>元素，邊框的寬度為2像素，樣式為虛線，顏色為藍色。通過設置.oval類的border-radius屬性的值為50%，我們將邊框的圓角設置為50%寬度，并且使得<div>元素的邊框呈現橢圓的外觀。
通過以上幾個案例，我們可以發現，使用border-radius屬性可以輕松地為<div>元素創建圓形或橢圓形邊框。我們可以根據需要調整寬高、邊框樣式和圓角半徑來實現不同的效果。這種方式在Web設計中經常用于創建圓角按鈕、頭像等元素，能夠提升網頁的美觀性和用戶體驗。同時，我們也可以利用JavaScript等技術為圓形邊框添加交互效果，增加頁面的趣味性和互動性。希望本文對您學習和使用<div>元素的圓形邊框有所幫助！