Last Updated: September 27, 2021
·
31.23K
· chris morgan

CSS's "transparent" may not be transparent, especially on diagonal borders

You might not realise it, but transparent is defined as rgba(0, 0, 0, 0)—transparent black. In WebKit browsers with no anti-aliasing (I believe they're finally in the process of rectifying this omission), this doesn't matter. However, in browsers with anti-aliasing of diagonal borders (IE9+ and Firefox), this can have serious implications.

IE9 does tricky stuff so that (unfortunately for the Mozilla-lover in me) it doesn't have a problem, but Firefox handles it the naive way, drawing what is effectively a gradient between the two border colours.

Take a look at what something like this does:

border-top: 100px solid transparent;
border-left: 100px solid #eee;

<div style="border-left:100px solid #eee; border-top:100px solid transparent"></div>

Yep, if you're using Firefox, you'll see there a dark grey line between the light grey and the white, because it's rendering a gradient from #eee to transparent black (and so it hits semi-transparent darker grey in the middle of the gradient).

To get it working properly in Firefox, you would need transparent #eee rather than transparent #000. (Sorry, convert your hex to decimal, #rgba didn't make it into the CSS3 Colors module.)

border-top: 100px solid rgba(238, 238, 238, 0);
border-left: 100px solid #eee;

<div style="border-left:100px solid #eee;border-top:100px solid rgba(238,238,238,0)"></div>

As it stands, many, many things use transparent black when they shouldn't. And very few people understand why.

2 Responses
Add your response

Looking at the CSS3 Color module, I see this: http://www.w3.org/TR/css3-color/#rgba-color - why do you say that RGBA didn't make it into the module?

over 1 year ago ·

I believe he was referring to this:

// The extra two characters are the alpha channel:
background-color: #EEEEEE00;
// Or...
background-color: #eee0;
over 1 year ago ·