如果您分别对每个角进行圆角处理，您会注意到一个差异。100%对每条边进行100%的圆角处理，而50%只对每条边进行50%的圆角处理。如果圆角的半径对于任何给定的边来说都太大，则有效半径将较小。
请看这个例子：

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>

任何大于半径的值默认为实际半径。根据定义，半径在所有方向上都是相同的，定义为圆。换句话说，半径是直径的一半。50%。
这意味着任何超过半径的东西（半径是一半，所以50%）默认为半径，所以浏览器认为任何超过50%的东西就是50%，并且会有同样的效果。
我找到了这个here。

如果超过半径，将始终使用实际半径。根据定义，半径定义圆在所有方向上都相同。或者说，直径的一半。50%。这是浏览器识别的。
一些作者决定只写一个，虽然我不知道他们为什么这样做。浏览器似乎必须更努力地工作，以确定实际的半径是什么（为了防止曲线重叠）。浏览器将只计算圆的直径为一半，即使我们使用像素单位。选择50%，如果这似乎是最合乎逻辑的选择自己的理智。