css dotted hr is set of little square not dots/cricles

Question

Here's the part I added to my CSS style sheet in the header:

<style>

    body{
      background-color: #EAF6F6;
    }

    hr{
border-style: none;
border-top-style: dotted;
border-color: lightgrey;
border-width: 5px;
width: 5%;
    }

  </style>

And here's what it looks like:

As you can see, it more looks like squares than rounded shapes like dots and the tutorial I was following had the exact same piece of code but ended up with tiny dots in a line a.k.a dotted line! Why is that?

Answer 1

Dotted lines are being rendered differently depending on the browser and the operating system. I quickly ran a test with multiple browser on multiple systems.

The following browsers render square dots:

• Safari MacOS
• Safari iOS
• Chrome iOS

The following browsers render round dots:

• Chrome MacOS
• Chrome Windows
• Firefox MacOS
• Firefox Windows
• Edge Windows

Here is a thread that gives you alternative solutions, such as using images, SVGs or fonts to achieve a consistent look through out all browsers. How to create dotted border with round dots in WebKit browsers?

Answer 2

<hr class="class-1" />     
.class-1 {
border: 5px dotted #000;
border-color: red;
}

Try to include this class in your hr tag