Сшивание по кругу в Firefox с использованием border-radius и border: dashed

Question

Я пытаюсь создать полукруг с рисунком строчки.

Но с моим текущим кодом он не получает пунктирный узор снаружи (я знаю, что это border-radius, что делает это).

Chrome производит правильный результат, но в Firefox я получаю следующий результат:

Мой текущий код:

a#middle-left-circle{ 
    display:block; 
    width: 90px; 
    height: 180px; 
    background: #117300; 
    border-radius: 0 180px 180px 0; 
    -moz-border-radius: 0 180px 180px 0; 
    -webkit-border-radius: 0 180px 180px 0; 
    border: 2px dashed #ffffff; 
    box-shadow: 0 0 0 4px #117300; 
} 

Answer 1

Это на самом деле известная ошибка, что Firefox не в состоянии сделать пунктирные границы вокруг пограничных радиусов:

https://bugzilla.mozilla.org/show_bug.cgi?id=382721

В настоящее время ошибка имеет статус «НАЗНАЧЕН», поэтому в любом случае это может быть исправлено в ближайшее время.

---

После выполнения дополнительных исследований, как представляется, обходной путь, который включает в себя использование div:before pseudoelement - см this fiddle для демонстрации. Кредит GCyrillus для этого решения.