What is the difference between border-radius 50% and 100%?

Question

I just found that border-radius: 50% and border-radius: 100% look the same.

Does anyone have an explanation on that?

Answer 1

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>

Answer 2

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.