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

user_4122028 0
Viewed 3732

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:

enter image description here

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?

dotted-line css
2 Answers

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

enter image description here

The following browsers render round dots:

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

enter image description here

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?

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

Try to include this class in your hr tag

user_83990250
Related