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.