CODEWITHSUNDEEP
htmlcssstylesprogress-bar
kavinder
kavinder

Reputation: 609

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

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: enter image description here

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?

Upvotes: 0

Views: 332

Answers (2)

Adriatic
Adriatic

Reputation: 1287

The border-left: 4px solid #F4DD50; is causing your problem. You need to find a workaround for your border radius.

Upvotes: 0

Mehedi Hasan Siam
Mehedi Hasan Siam

Reputation: 1272

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>

Upvotes: 1

Related Questions