Having trouble with <hr> in CSS

user_10611544 0
Viewed 292

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>

css html
2 Answers

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>

user_46947570

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;
}
user_90472290
Related