4

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.

marcamillion
  • 32,933
  • 55
  • 189
  • 380

3 Answers3

5

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.

robertc
  • 74,533
  • 18
  • 193
  • 177
  • @marcamillion You have several options, not that you're necessarily going to like any of them: 1. write a patch for this issue and submit it to Mozilla; 2. Wait for someone else to fix it; 3. Use an image instead; 4. Use whatever you're using to fake it in IE instead; 5. Don't worry about it. – robertc Jan 22 '11 at 00:39
  • Funny...I never even thought about fixing it....but now that you mentioned it, I think I will look into it and see if I can help. Doubt it, but you never know! – marcamillion Jan 22 '11 at 08:25
0

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/

Foysal Remon
  • 301
  • 2
  • 9
0

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.

aqua
  • 3,269
  • 28
  • 41
  • Actually, that's not the case. Look at this: http://jsfiddle.net/Wtcdt/18/ Also, look at that in Chrome, then in Firefox. You will see a drastic difference. I want it to look in Firefox as it does in Chrome. – marcamillion Jan 21 '11 at 06:51
  • Very interesting. Looks like a bug. I'm using Firefox 3.0.19. You? – aqua Jan 21 '11 at 07:19
  • 3.6.13. It could be a bug, but I think it might be something more. – marcamillion Jan 21 '11 at 07:21
  • Well, it works as you intend it to in Safari and Chrome (Mac). It's not working in Firefox, be it Windows or Mac. – aqua Jan 21 '11 at 07:26