If I use a pixel or em value for border-radius, the edge radius is always a circular arc or a pill shape even if the value is greater than the largest side of the element.
When I use percentages, the edge radius is elliptic and starts at the middle of each side of the element resulting in an oval or ellipse shape :
Pixel value for border-radius :
div {
background: teal;
border-radius: 999px;
width: 230px;
height: 100px;
padding: 40px 10px;
box-sizing: border-box;
font-family: courier;
color: #fff;
}
<div>border-radius:999px;</div>
Percent value for border-radius :
div {
background: teal;
border-radius: 50%;
width: 230px;
height: 100px;
padding:40px 10px;
box-sizing:border-box;
font-family:courier;
color:#fff;
}
<div>border-radius:50%;</div>
Why doesn't border radius in percentages act the same way as border-radius set with pixel or em values?