HTML progress bar with custom background color has design problem if it has low values

Question

This custom CSS progress bar works with value 500 over 1000, but fails with value 5 over 1000:

How to avoid this unesthetic vertical line on the left? (browser: Chrome)

progress { appearance: none; }
progress::-webkit-progress-value { border-radius: 10px; background-color: #00122c; }
progress::-webkit-progress-bar { border: 1px solid #00122c; border-radius: 10px; background-color: white; }

<progress color="red" value="5" max="1000" ></progress>
<progress color="red" value="500" max="1000" ></progress>

Answer 1

Move the border-radius and border definition to the progress element and hide the overflow:

progress {
  appearance: none;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid #00122c;
}

progress::-webkit-progress-value {
  border-radius: 10px;
  background-color: #00122c;
}

progress::-webkit-progress-bar {
  background-color: white;
}

<progress color="red" value="5" max="1000"></progress>
<progress color="red" value="500" max="1000"></progress>