Search code examples
cssdotted-line

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

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?

Solution

  • 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?