White pure CSS triangle bug on Firefox 6 Windows

Question

Notice the gray border on the white triangle. This only happens on FF 6 Windows (I did not test on older FF version)

Is there a fix to this? It looks like bad anti-aliasing or something.

To be honest, I don't see a gray border. FF 6 on Windows 7 x64. — Wladimir Palant, Sep 24 '11 at 21:14
I had the exact same problem, see the solution provided to me here: http://stackoverflow.com/questions/9393354/strange-behavior-with-borders-on-firefox-10-on-windows — Nicklas A., Feb 22 '12 at 13:56

score 10 · Accepted Answer · edited Jun 20 '20 at 09:12

10

Give it a try with this:

border-style: outset;

http://jsfiddle.net/KDREU/

edit

Looks like if you put outset on one of the 4 border styles you can use colors other than white and not have them lightened.

/* This works for an orange down arrow that I'm using. */
border-style: solid outset solid solid;

http://jsfiddle.net/fEKrE/1/

edited Jun 20 '20 at 09:12

Community

1
1

answered Sep 27 '11 at 02:08

Ben Kimpel

116
3

Note that depending on the direction the triangle is pointing to you'd have to use `inset` instead of `outset`. – Simon Dec 19 '12 at 15:52

score 1 · Answer 2 · answered Mar 13 '13 at 15:05

1

fixed with

border-style: solid dashed solid solid;

tested on firefox 19.0.2, opera 12.04, chromium 25.0.1359.0

answered Mar 13 '13 at 15:05

Basarium

11
1

score 1 · Answer 3 · answered Sep 24 '11 at 00:34

1

It happens on FF6 on Linux too. It's going to be an artifact from antialiasing the diagonal line. AFAIK, there isn't a way around this other than to use an image.

answered Sep 24 '11 at 00:34

Bojangles

99,427
50
170
208

I think if Firefox used alpha-antialiasing (aAA? :-P) then the grey line would disappear, but it uses RGB AA unfortunately. – Bojangles Sep 24 '11 at 02:48

White pure CSS triangle bug on Firefox 6 Windows

3 Answers3

edit