Jump to content
Great article but I was curious about one thing. In your last example your screen-shot shows the nice transparent borders but you have not mentioned the need to use the background-clip property to get this affect. Without it the border sits on top of the background colour.
Therefore the code sample at the end should in fact be:
color: rgb(0, 0, 0);
background-color: rgb(255, 255, 255);
border: 10px solid rgba(255, 255, 255, 0.3);
In my quick test it doesn’t seem that Opera support background-clip and of course this generates the odd corner behavior in Webkit that others have mentioned.