Having trouble with <hr> in CSS

Question

When I use this code it displays the circle dots like I want it to. But that only happens in chrome, when I view the website on safari it is square. Is there any way to make it so it displays the same on both safari and chrome?

I tried it in chrome and it works perfectly, but on safari it is squares.

 hr { border-style: none; border-top-style: dotted; border-color:green; border-width: 10px; width:30%; } 

 <hr> 

Answer 1

Try this:

 hr { border-top: 10px dotted green; width: 30%; height: 0.01px; border-top-style: dotted; border-left: none; border-right: none; border-bottom: none; color: green; display: block; border-color: green; } 

 <hr> 

Answer 2

You can use Pseudo: after element to set dotted line after the text.Here is the example.

div {
  display: flex;
  width: 300px;
}

div:after {
  border-bottom: 1px dotted black;
  content: '';
  flex: 1;
}