Circle with dotted or dashed border

Question

With this CSS styles I expect a circle with dotted border:

div{
    border: 1px dotted #000;
    padding: 50px;
    border-radius: 100px;
    display: inline-block;
}

But Firefox is rendering solid borders (fiddle here). Any solution?

UPDATE
THIS IS NOT AN ISSUE ANY MORE.
RESOLVED in Firefox 50

i have to chuckle that none of the asker, the above comment author, or the other answer author thought to try this in more than their pet browser :) — Eevee, Oct 10 '13 at 22:51
You might need to increase the width of that border to, say, 3px — Giovanni Silveira, Oct 10 '13 at 22:52
@Eevee - at least my "pet browser" can draw borders correctly. In all seriousness, I can reproduce with FF 24, even with a different border width. — Tim M., Oct 10 '13 at 22:53
Well, it works on Chrome. You might need to wait until they fix that bug, or you can draw it with ` — Giovanni Silveira, Oct 10 '13 at 22:57

score 10 · Accepted Answer · edited May 23 '17 at 11:45

10

If you're using Firefox, this is a known bug. Your options are:

If this is just for the sake of a circle, draw it with <canvas>, e.g. as demonstrated here
Use SVG (possibly inline), which supports various ways to stroke paths
Just make a PNG
Fix the bug, which Mozilla will surely appreciate ;)

edited May 23 '17 at 11:45

Community

answered Oct 10 '13 at 22:49

Eevee

1

OMG, I prefer to give up and use a trapezoid instead of fixing this bug. Of-course not just for fixing the bug, but forcing users to update their browsers ;) – Omid Oct 10 '13 at 22:59
ah, thinking of the users! how very selfless of you ;) – Eevee Oct 10 '13 at 23:00

1 Answers1