CODEWITHSUNDEEP
htmlcss
Greg
Greg

Reputation: 3063

line break <hr> not rendering as expected

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

and how to get rid of it?

Thanks

https://jsfiddle.net/Lc7gym88/

enter image description here

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

Upvotes: 3

Views: 146

Answers (4)

Jay
Jay

Reputation: 151

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

Upvotes: 1

Gaurav Aggarwal
Gaurav Aggarwal

Reputation: 10207

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/

Upvotes: 2

Ahs N
Ahs N

Reputation: 8386

Replace this:

border-bottom: 4px solid #469551;

by this:

 border: 4px solid #469551;

Here is the JSFiddle demo

Upvotes: 3

Justinas
Justinas

Reputation: 43557

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

Upvotes: 4

Related Questions