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

Notice the gray border on the white triangl开发者_StackOverflow中文版e. 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.

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/

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.

fixed with

border-style: solid dashed solid solid;

tested on firefox 19.0.2, opera 12.04, chromium 25.0.1359.0