Pure CSS triangle looks blurry in firefox

Question

I'm trying to use the pure css triangle used in this article in CSS tricks http://css-tricks.com/snippets/css/css-triangle/ but the look blurry in firefox 14. Can I fix it somehow or is it just that FF doesn't render it correctly?

EDIT: Here's an screenshot of how it looks like http://awesomescreenshot.com/0fcf904eb I thought it was a general issue so I just put a link to the article sorry about that

Answer 1

I was having the same issue. Turns out it was something with my Graphics Driver.

Check the Anisotropic Filtering settings in your 3D Graphic Driver. I had mine set to Override Application Settings and 16x. After changing it back to Use Application Settings and restarting Firefox, the blurriness went away.

Answer 2

use border-style: dotted; will get rid of the blurry edge on FF. Basically, anything but border-style: solid; should work. It might be fixed in FF latest but I definitely experienced the same problem as you, but couldn't test on different FF versions.

For the record I was on FF (15 I guess) winXP