Progress bar border overlapping rounded corner

Question

I have a progress bar with rounded corners. When progress is 100% it overlaps the rounded corner of the background white color making it square. In Firefox it works correctly but not in the rest of the modern browsers (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

Adding overflow: hidden on the progress element should do the trick

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>