Firefox 17 and CSS borders based triangles not rendering properly

Question

Like many front-end devs, I've been using the border trick to render triangles in CSS. http://apps.eky.hk/css-triangle-generator/ this generator helps with the technique.

Today, the Firefox team released a new version without any clear changelog on the rendering engine.

Now we can see an ungraceful gray border around those triangles. I haven't found a trick to get rid of it yet. edit : it's easier to see if you force the "chess-like transparent" background to something like "green"

On top of that, before Firefox 17, when people were complaining about how aliased those triangles looked, an additional trick was to set the border-style property to "dashed" instead of solid.

Using firebug on the triangle generator, you can quickly see how it shows up now.

Does anyone know a fix for this?

edit : using border-style:inset as suggested renders a lighter color on my FF17

Answer 1

This combination of Adeher's fix and the other dotted border fix seems to solve the problem perfectly in FF23.

In long form:

border-top: 10px solid #FF0000;
border-left: 30px dotted rgba(255, 0, 0, 0);
border-right: 30px dotted rgba(255, 0, 0, 0);

Combining Adeher's rgba() fix with the dotted border fix (but only on the transparent borders) seems to render a perfect triangle without ugly blurry borders.

Answer 2

Ok here is the best solution I have so far :

get the rgb value of your triangle, and use this as a 0 opacity rgba instead of "transparent" for the opposing borders of your triangle.

Keeping the old syntax "transparent"-based will work as a fallback for IE8

that ends up with something like this :

border-color: transparent transparent transparent #ffffff;
border-color: rgba(255,255,255,0) rgba(255,255,255,0) rgba(255,255,255,0) #ffffff;

as said in replies : setting the border-style to "inset" as suggested alters the color on FF17.

I hope somebody will find a simpler solution, or that this post will help other people.