CODEWITHSUNDEEP
htmlcsscolorsbackground-color
Paulcraey
Paulcraey

Reputation: 391

hr tag shows a line in 2 colors against a colored background

I use a hr tag. It was working well, untl I gave the text a colored background. Now I see a white line under the black line. How to see only the black line?

div {
  background-color: #eab126;
  min-height: 100px;
}

hr {
  height: 1px;
  color: #fff;
}
<div>
    Testing<br />
    Testing<br />

  <hr />

Testing<br />
Testing<br />

</div>

This is what the hr looks like

Upvotes: 2

Views: 1350

Answers (2)

Lee Taylor
Lee Taylor

Reputation: 7984

To change the colour of the hr you use border-color not color.

To change the height of the hr manipulate the border width(s):

div {
  background-color: #eab126;
  min-height: 100px;
}

hr {
  border-color: black;
  border-top-width: 0px;
}
<div>
  Testing<br /> Testing
  <br />

  <hr /> Testing

  <br /> Testing
  <br />

</div>

Upvotes: 0

Charlene Vas
Charlene Vas

Reputation: 731

You need to change the CSS for the hr tag,

HTML 5 Boilerplate project in its default stylesheet specifies the following rule:

hr { display: block; height: 1px;
border: 0; border-top: 1px solid #ccc;
margin: 1em 0; padding: 0; }


div {
  background-color: #eab126;
  min-height: 100px;
}

hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid white;
  margin: 1em 0;
  padding: 0;
}
<div>
  Testing<br /> Testing
  <br />

  <hr /> Testing

  <br /> Testing
  <br />

</div>

Upvotes: 2

Related Questions