I do not understand

[mcmichaeltyler93]

hr {
      background-color: white;
      border-style: none;
      border-top-style: dotted;
      height: 0px;
      width: 30%;
    }

Question: why is the background-color irrelevant now?

[8-bitgaming]

It would appear you’ve set the height to 0px. If there’s no height to the element, what background is there to color?

[javanoob]

@mcmichaeltyler93

hr {
      background-color: white;
      border-style: none;
      border-top-style: dotted;
      height: 0px;
      width: 30%;
    }

Question: why is the background-color irrelevant now?

Shorter answer: You have the height set to 0 (zero). That’s making the line the <hr> tag creates invisible because it has no height. If your page background is white, which it will be by default if you haven’t assigned a different color for it, a white line is not going to be visible on a white background either.

More detailed answer:
The <hr element in HTML creates a thin line horizontally across the page where you place the tag. Without styling it it appears like the line below this text.

---

And above this text.

If you change the background color of the hr line to a different color than the overall background color of the page it would be visible because it’s a different color.

You can use a website like w3schools or codepen.io or jsfiddle.net to play with and test code in. Here’s the test portal on w3schools for the hr tag and CSS element:

W3Schools online HTML editor

Play around with it. Give it different background colors and change the height and width properties around and then hit “Run” to see what your changes do.

Note that an hr tag might not do anything when you give it border styling. It’s just a line, it doesn’t have a border to style.