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">

I don't really know what am I doing wrong.

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>