Consider the following code
HTML
<p class="dotted3">A dotted border with squares.</p>
<p class="dotted4">A dotted border with circles.</p>
CSS
p.dotted3 {border: 3px dotted #000;}
p.dotted4 {border: 4px dotted #000;}
Why does the border at 3px look like squares but circles at 4px?
It looks like that's a common behavior in several browsers, probably for avoiding loss of border quality. Take a look at some examples.
Chrome (version 92.0)
Edge (version 92.0)
Safari (version 12.1)
Here, the dotted border is always showing as squares, even when it's wider (the image shows a comparison between 3px and 15px borders).
In Firefox (version 92.0), the border doesn't get squared. However, you can notice a little loss of quality in its circles.
