在CSS中，我們經常需要制作圓形邊框的效果。但是有時候，我們會發現邊框并不是圓形的，而是變形了。這是因為我們沒有使用正確的CSS屬性和值。

.circle {
width: 100px;
height: 100px;
border-radius: 50%; 
border: 2px solid black;
}

上面的代碼是典型的CSS圓形邊框的實現。我們使用了border-radius屬性來制作一個圓形的形狀，同時使用了50%的值讓它變成一個正真的圓形。然而，我們發現邊框并不是很圓，而是變形了。

這是因為我們給邊框設置了值。在邊框的情況下，寬度會被加在border-box外。也就是說，當我們使用border-radius來設置圓角時，圓角的邊緣并沒有沿著完全圓形的路徑連接起來，而是沿著一個稍微扁平的路徑連接起來。

為了解決這個問題，我們可以使用box-sizing屬性。如果我們將它設置為border-box，它將包含邊框和填充在內的盒子作為元素的寬度和高度，從而帶有正確的形狀。

.circle {
width: 100px;
height: 100px;
border-radius: 50%;
border: 2px solid black;
box-sizing: border-box;
}

上面的代碼通過加上一個box-sizing屬性，完美地解決了我們遇到的問題。現在，我們的圓形邊框在高度和寬度方面也是完美的圓形！