html - How to get rid of a white border around a bar

Question

Im trying to make a site and it needs to have a progress bar in it. But whenever I try to make it, it just makes a white border around the bar for no reason. I dont really know how to fix it.

hr.someClass {
  background-color: blue;
  width: 200px;
  height: 12px;
}

 <hr class="someClass">

question from:https://stackoverflow.com/questions/66051526/how-to-get-rid-of-a-white-border-around-a-bar

Answer 1

Add this to your bar

border: none;

Your have not specified what to do with the border, so html will set the default border.

also I would prefer making a progress bar like this

.bar {
width: 250px;
height: 20px;
background: #f1f1f1;
}

.percent {
height: 100%;
width: 25%;
background: #4c4c4c;
display: block;
transition-duration: 300ms;
}

.percent:hover {
width: 50%;
}

<div class="bar">

<span class="percent"></span>

</div>