How do I round the corners of a HTML progress bar?

<html>
<progress value="50" max="100" min="0" class="progress1"></progress>
<style>
  .progress1 {
    width: 500px;
    height: 100px;
    background-color: red;
    border-radius: 10px;
  }
  
  progress::-webkit-progress-bar {
    width: 500px;
    height: 100px;
    border-radius: 10px;
  }
  
  progress::-webkit-progress-value {
    background-color: red;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
  }
  
  progress::-moz-progress-bar {
    width: 500px;
    height: 100px;
    background-color: red;
    border-radius: 10px;
  }
</style>

</html>