White pure CSS triangle bug on Firefox 6 Windows

Question

http://jsfiddle.net/pixelfreak/Eq246/

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.

Answer 1

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/

Answer 2

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.