0

I wanted to create a dashed border for my circle, but I can't seem to find any good solution. I'm trying this one:

.test{
    width: 200px;
    cursor: pointer;
    border: 9px dashed #104F75;
    border-radius: 200px;
    height: 200px;
}
<div class="test"></div>

And it seems to be working fine on Chrome and Edge, but when I open it in Firefox, the circle isn't dashed at all. Moreover, border looks different when I look at it using Chrome and Edge.

I'm looking for browser-wide working solution for this kind of CSS effect, not explenation that this is a Firefox bug.

Kajcioch
  • 175
  • 1
  • 8
  • @DaniP I edited the question, and could you please unmark this as duplicate? I'm not asking what is it, becuase I do realise it's a Firefox bug - I'm looking for a **solution**. – Kajcioch Nov 24 '16 at 21:43
  • 1
    What about the options here http://stackoverflow.com/a/26354776/2887133 – DaniP Nov 24 '16 at 21:48
  • it is a firefox bug, an svg could help http://codepen.io/gc-nomade/pen/wBPLvL stroke-x values are to be tuned to match the size of your boxe :) – G-Cyrillus Nov 24 '16 at 23:21

0 Answers0