Dotted border

I have a dashed border that looks correct in chrome but doesn't look right in firefox.

.circle {
    border: 1em dotted #235ea4;
    border-radius: 7em;
    height: 7em;
    margin: 2em auto 0;
    padding: 2em;
    text-align: center;
    width: 7em;



Please help solve this problem.


source to share

3 answers

@Bhumi Shah The problem you are trying to solve cannot be achieved using CSS alone. If you are using SVG

then there SVG

might be a solution. using SVG you can create a rounded circle with a dashed border. Have a look at the DEMO done with SVG.

<svg width="300px" height="300px" viewBox="0 0 300 300" style="border:1px solid #000;">
<circle cx="100" cy="100" r="90" 
stroke="#448800" stroke-dasharray="20,10" stroke-width="20"
fill="none" />

Run codeHide result



Is an open mozilla firefox bug



This is a bug in Firefox, - It was opened in 2007 but hasn't been fixed yet.



All Articles