htmlcsstags

Creating a dotted <hr> tag keeps a grey line through the bottom part of the dots

Simple question probably, I hope I didn't miss someone else asking this because idk how to explain it in coding terms honestly

Basically, I'm trying to learn basic web design through creating an indie web website, and when creating a dotted <hr> tag it does create a dotted line as I want but it looks as though it's pasted over an unstyled grey line. I don't have any other code telling it to do that as far as I know, I'll paste the relevant code + a screenshot

.landingMain {
  justify-content: center;
  border: dotted;
  color: whitesmoke;
  text-align: center;
  margin-left: 60vh;
  margin-right: 60vh;
  flex-direction: row;
}

.landingSubHeading {
  font-family: "Twinkle star", cursive;
  font-style: normal;
  margin: auto;
  text-align: center;
}

hr.dotted {
  border-top: 3px dotted #FFF;
}
<div class="landingMain">
  <h2 class="landingSubHeading">Hi! I'm Maya!</h2>
  <hr class="dotted">
  <p>test</p>
</div>

Website Screenshot

Solution

  • Set hr.dotted { border-bottom: 0; }:

    body{
    background: black;
}

.landingMain {
    justify-content: center; 
    border: dotted;
    color: whitesmoke;
    text-align: center;
    margin-left: 60vh;
    margin-right: 60vh;
    flex-direction: row;
}
.landingSubHeading {
    font-family: "Twinkle star", cursive;
    font-style: normal;
    margin: auto;
    text-align: center;
}
hr.dotted {
    border-bottom: 0;
  border-top: 3px dotted #FFF;
}
    <div class="landingMain">
  <h2 class="landingSubHeading">Hi! I'm Maya!</h2>
  <hr class="dotted">
  <p>test</p>
</div>