Why do dotted CSS borders sometimes show as squares instead of circles?

Question

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?

image: difference between 3 and 4px with dotted border

Answer 1

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.