圆角按钮边框长度动画异常修复：border-radius为9px时右侧边框出错

问题场景 #

按钮边框长度动画在无圆角时运行正常，但设置border-radius:9px或类似圆角值后，右侧边框动画出现异常，无法正常呈现预期效果。

问题原因 #

原实现中伪元素设置了全局border-radius，当伪元素高度扩展至100%时，自身的右下角圆角会与按钮的右下角圆角冲突，导致右侧边框的底部部分显示异常。

修复方案 #

调整伪元素的圆角设置，仅保留对应方向的圆角，并优化容器样式确保动画范围正确：

修改后的完整代码 #

body {
  font-family: sans-serif;
  background-color: black;
  height: 100vh;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.button {
  position: relative;
  width: 200px;
  height: 40px;
  background-color: #083a65;
  border: none;
  color: white;
  font-size: 18px;
  border-radius: 10px;
  overflow: hidden;
}

.button::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  border-top: 1px solid yellow;
  border-right: 1px solid yellow;
  animation: border-top-right-animation 2s infinite;
}

.button::after {
  content: "";
  position: absolute;
  right: 0px;
  bottom: 0px;
  width: 0;
  height: 0;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  border-left: 1px solid yellow;
  border-bottom: 1px solid yellow;
  animation: border-bottom-left-animation 2s infinite;
}

@keyframes border-top-right-animation {
  0% {
    width: 0px;
    height: 0px;
  }
  25% {
    width: 100%;
    height: 0px;
  }
  50% {
    width: 100%;
    height: 100%;
  }
  100% {
    width: 100%;
    height: 100%;
  }
}

@keyframes border-bottom-left-animation {
  0% {
    width: 0px;
    height: 0px;
    opacity: 0;
  }
  50% {
    width: 0px;
    height: 0px;
    opacity: 0;
  }
  50.1% {
    width: 0px;
    height: 0px;
    opacity: 1;
  }
  75% {
    width: 100%;
    height: 0px;
    opacity: 1;
  }
  100% {
    width: 100%;
    height: 100%;
    opacity: 1;
  }
}

<button class="button">My button</button>

关键修改点 #

• 给.button添加overflow: hidden，限制伪元素的显示范围，避免超出按钮圆角。
• 为::before仅设置顶部两个圆角（border-top-left-radius和border-top-right-radius），匹配按钮的顶部圆角，消除右侧边框底部的圆角冲突。
• 为::after仅设置底部两个圆角（border-bottom-left-radius和border-bottom-right-radius），匹配按钮的底部圆角。
• 调整body的高度为100vh并清除默认边距，确保垂直居中效果正常。

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