正确地围绕元素的角落

Question

当我使用border-radius来围绕div的角落时，它的角落行为不端，看起来很奇怪。结果看起来像this

如何正确对齐角落？

Answer 1

问题很简单，我传递的值是％而不是px。

div {
height: 50px;
width: 100px;
margin-bottom: 20px;
}

.pixels {
border-radius: 15%;
background: firebrick;
}

.percentages {
border-radius: 15px;
background: seagreen;
}

<div class="pixels"></div>
<div class="percentages"></div>

将％中的值传递到border-radius使得按钮看起来是椭圆形的，而不是使角落更平滑。