CODEWITHSUNDEEP
htmlbordercss
marcamillion
marcamillion

Reputation: 33755

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

You can see the implementation here:

http://jsfiddle.net/Wtcdt/

In FireFox on Mac, that circle is round/solid. I want it either dashed or dotted.

What makes it even weirder is that the same property (i.e. border: 4px dashed #000) works fine on an HR. So why does it not work when border-radius is involved?

This is so bizarre to me.

Upvotes: 4

Views: 4796

Answers (3)

Foysal Remon
Foysal Remon

Reputation: 301

Its a Firefox bug. Typically you have to either make solid border or remove radius. But if both of the properties are important then you can replace the corner with image like this: http://eblog.foysalremon.com/dashed-border-radius-corners-rendered-as-solid-on-firefox-solved/

Upvotes: 0

robertc
robertc

Reputation: 75707

It's a bug, WebKit had a similar issue but it was fixed in June. Here are all the other outstanding border-radius defects in Firefox.

Upvotes: 5

aqua
aqua

Reputation: 3375

Your circle is too small. If you increase the height and width you will notice that the shape expands to a rounded-rectangle, the rounded edges remain solid but the lines become dashed.

Upvotes: 0

Related Questions