CSS帶邊的半圓是前端設計中經常使用的一種元素。可以用于制作按鈕、圖標、導航欄等。下面我們來學習如何制作出漂亮的帶邊半圓。

首先，我們需要一個div容器來承載這個半圓，然后我們可以使用CSS的border-radius屬性來調整半圓的圓角大小。代碼如下：

<div class="half-circle"></div>
.half-circle {
width: 100px;
height: 50px;
background-color: #f5f5f5;
border-radius: 0 0 50px 50px;
}

上面的代碼中，我們使用了一個100px寬、50px高的div容器，設置了背景顏色為#f5f5f5的灰色。然后我們使用border-radius屬性將div的左下角和右下角設置成50px的圓角，而上面兩個角則沒有設置圓角，這樣就形成了一個半圓。

接下來，我們需要使用CSS的border屬性來為半圓添加邊框。代碼如下：

.half-circle {
width: 100px;
height: 50px;
background-color: #f5f5f5;
border-radius: 0 0 50px 50px;
border: 2px solid #ccc;
}

上面的代碼中，我們使用了border屬性為半圓添加了一個厚度為2px的灰色邊框。

最后，我們可以使用CSS的偽元素before或after為半圓添加一個小三角，從而增強其美觀程度。代碼如下：

.half-circle:before {
content: "";
position: absolute;
width: 0;
height: 0;
top: -10px;
left: 40%;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid #ccc;
}

上面的代碼中，我們使用偽元素before為半圓添加了一個白色的向下的小三角。我們首先使用position屬性將它的位置設置為absolute，再通過border屬性設置其大小和樣式。

通過上面的步驟，我們就成功地創建了一個美觀的帶邊半圓！