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

Problem

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 an HR. So why does it not work when border-radius is involved?

This is so bizarre to me.

Problem courtesy of: marcamillion

Solution

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.

Solution courtesy of: robertc

Discussion

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/

Discussion courtesy of: Foysal Remon

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.

Discussion courtesy of: aqua

This recipe can be found in it's original form on Stack Over Flow.