Пунктирная граница не отображается в firefox

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

Демо

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

Ответы

Ответ 1

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

Это известная ошибка. Ваши варианты:

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