进度条边框重叠圆角

Question

我有一个带有圆角的进度条。当进度为 100% 时，它会与背景白色的圆角重叠，使其成为正方形。在 Firefox 中它可以正常工作，但在其他现代浏览器（Chrome、Edge）中则不能。

body {
  background: #ccc;
}
#feedProgress {
  width: 200px;
  height: 30px;
  border: none;
  background: #fff;
  appearance: none;
  border-radius: 0.5rem;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
#feedProgress::-webkit-progress-bar {
  background: #fff;
  border-radius: 0.5rem;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
#feedProgress::-webkit-progress-value {
  background: #006DC5;
  border-radius: 0.5rem;
  border-top-right-radius: 0;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

<progress id="feedProgress" value="50" max="100"></progress><br><br>

<progress id="feedProgress" value="100" max="100"></progress>

Answer 1

在进度元素上添加

overflow: hidden

应该可以解决问题

body {
  background: #ccc;
}
#feedProgress {
  width: 200px;
  height: 30px;
  border: none;
  background: #fff;
  appearance: none;
  border-radius: 0.5rem;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  
  overflow: hidden;
}
#feedProgress::-webkit-progress-bar {
  background: #fff;
  border-radius: 0.5rem;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
#feedProgress::-webkit-progress-value {
  background: #006DC5;
  border-radius: 0.5rem;
  border-top-right-radius: 0;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

<progress id="feedProgress" value="50" max="100"></progress><br><br>

<progress id="feedProgress" value="100" max="100"></progress>