How to remove a vertical line from the html progress bar styling

Question

I have a progress bar appearing on a web page. The code is

progress {
  display: inline-block;
  vertical-align: baseline;
}

.progress-yellow {
  color: #F4DD50;
  border-radius: 4px;
  height: 8px;
  border-left: 4px solid #F4DD50;
  border-right: 4px solid grey;
}

<progress class="progress-yellow" max="100" value="42.0"></progress>

The UI looks like this:

As it appears on the image there is a vertical line on the progress bar, i am not sure how to remove that. It goes of when i zoom in or zoom out of the web page, which is strange. Any ideas?

Answer 1

You have border-left. That's why you have a border in your progress bar. You can try this code if you want to make a border-radius styled progress bar.

Step 1:

       .progress-bg { 
            background-color: #F4DD50;
            padding: 1%; 
            border-radius: 15px; 
        } 
        
        .progress-width { 
            width: 30%; 
        } 
        
        .progress { 
            background-color: grey; 
            width: 80%; 
            border-radius: 15px; 
        } 
        

<div class="progress">
  <div class="progress-bg progress-width"></div> 
</div>

Step 2:

.progress-yellow {
  height: 8px;
  border-radius: 30px;
  width:40%;
}
progress[value]::-webkit-progress-bar {
  background-color: grey;
  border-radius: 40px;
}

progress[value]::-webkit-progress-value {
  border-radius: 40px;
  background-color:#F4DD50;
}

<progress class="progress-yellow" max="100" value="42.0"></progress>