Dotted border not showing in firefox

Question

I have a div radius with a 5px dashed border, but the border does not display correctly in Firefox . It shows IE and Chrome well.

Demo

  div{ height:100px; width: 100px; background-color: #ccc; border-radius: 50%; border:5px dashed #333; } 

Answer 1

Your frame works on firefox, see DEMO, you can check this with the removal of the radius. FireFox has an error while trying to circle with a dotted border.

This is a known bug . Your options:

• If this is only for the sake of the circle, draw it using <canvas> , for example. as shown here
• Use an SVG (possibly built-in) that supports various ways of the stroke path
• Just make a PNG image

Answer 2

This is a mistake, here are all the other outstanding border radius defects in Firefox. https://bugzilla.mozilla.org/show_bug.cgi?id=431176

old stream

Why is the border: 5px dotted not showing in Firefox?

you can achieve this using image

http://www.guyroutledge.co.uk/blog/better-dotted-borders-with-border-image/