如何仅为链接（a标签）制作的按钮末端设置圆角边框

你出现这个问题的核心原因是border-radius使用了百分比单位：
百分比单位会基于元素自身的宽高分别计算圆角的横向/纵向半径，你的按钮宽度远大于高度，用百分比设置圆角时，横向半径会过大，就会出现上下边向内凹陷、四个角都异常弯曲的情况。

解决方案 #

直接把border-radius的单位换成绝对值即可，你可以直接设置一个足够大的固定值，就能实现两端完全圆角、上下边平直的胶囊效果：

.overlay a {
  margin-left: 20px;
  text-decoration: none;
  color: #e4e0e0;
  border: 3px solid #f354f3;
  background-color: #595959;
  color: #f354f3;
  padding: 5px 100px;
  /* 替换原来的border-radius:20% */
  border-radius: 999px;
}

如果需要精准匹配设计稿的圆角弧度，也可以先测量设计稿中按钮的总高度，把border-radius设为高度的1/2即可，效果完全一致。

内容的提问来源于stack exchange，提问作者Tibo Mertens