Предельная граница не отображается в firefox

Question

У меня есть радиус div с 5px пунктирной рамкой, но граница не отображается правильно в Firefox. Это хорошо показывает IE и хром.

Demo

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

Answer 1

Ваша граница работает на Firefox см DEMO вы можете проверить его с удалением радиуса. FireFox имеет ошибку при попытке круга с пунктирной границей.

Это known bug. Ваши варианты:

• Если это только ради круга, нарисуйте его <canvas>, например. как было продемонстрировано here
• использования SVG (возможно, встроенный), который поддерживает различные способы stroke paths
• Просто сделать изображение PNG

Answer 2

Это ошибка, вот и все другие выдающиеся дефекты пограничного радиуса в Firefox. https://bugzilla.mozilla.org/show_bug.cgi?id=431176

старый нить

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

вы можете достичь его, используя изображение

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