line break not rendering as expected

Question

Any idea why there\'s a thin grey line above my green

---

and how to get rid of it?

Thanks

https://jsfiddle.net/Lc7gym88/

hr {
  border         


        

Answer 1

Replace this:

border-bottom: 4px solid #469551;

by this:

 border: 4px solid #469551;

Here is the JSFiddle demo

Answer 2

Removed default <hr> border and uses height and background

hr {
  background: #469551;
  width: 30%;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 0px !important;
  height: 4px;
  border:none;
}

Example : https://jsfiddle.net/Lc7gym88/1/

Answer 3

It's because <hr/> has border (at least in FireFox since <hr/> has browser dependent style).

Remove border first.

hr {
  border: none;
  border-bottom: 4px solid #469551;
  width: 30%;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 0px !important;
  height: 0;
}
body {
  background-color: black;
}

<br/>
<hr/>

Answer 4

by default tag <hr> taking border so you need first border zero. then add height check my demo