Why does border: 5px dashed not come out as dashed in Firefox?

You can see the implementation here:

http://jsfiddle.net/Wtcdt/

In FireFox on Mac, that circle is round/solid. I want it either dashed or dotted.

What makes it even weirder is that the same property (i.e. border: 4px dashed #000) works fine on 开发者_StackOverflow中文版an HR. So why does it not work when border-radius is involved?

This is so bizarre to me.

It's a bug, WebKit had a similar issue but it was fixed in June. Here are all the other outstanding border-radius defects in Firefox.

Your circle is too small. If you increase the height and width you will notice that the shape expands to a rounded-rectangle, the rounded edges remain solid but the lines become dashed.

Its a Firefox bug. Typically you have to either make solid border or remove radius. But if both of the properties are important then you can replace the corner with image like this: http://eblog.foysalremon.com/dashed-border-radius-corners-rendered-as-solid-on-firefox-solved/