What is the difference between border-radius 50% and 100%?
Anything more than the radius defaults to the actual radius. By definition a radius is the same in all directions, defining a circle. In other words, half of the diameter. 50%.
That means that anything above the radius (a radius is half, so 50%) defaults to the radius. So the browser thinks of anything above 50% as simply 50%, and will have the same effect.
I found this here.
You’ll notice a difference if you round each corner individually. 100% rounds 100% of each edge, 50% only 50% of each edge. If the corner is to be rounded by a radius that is too large for any given edge, then the effective radius will be smaller.
Consider this example:
div{
display: inline-block;
vertical-align: middle;
background: rebeccapurple;
border: 1px solid black;
width: 100px;
height: 100px;
margin-bottom: 10px;
}
code{
display: inline-block;
vertical-align: middle;
margin-left: 20px;
padding: 3px;
background: #eee;
}
.half{
border-top-right-radius: 50%;
}
.full{
border-top-right-radius: 100%;
}
.weird{
border-top-left-radius: 50%;
border-top-right-radius: 100%;
}<div class="half"></div><code>border-top-right-radius: 50%;</code><br/>
<div class="full"></div><code>border-top-right-radius: 100%;</code><br/>
<div class="weird"></div><code>border-top-left-radius: 50%;<br/>border-top-right-radius: 100%;</code>