Skip to content

24 ways to impress your friends

Vote up?

Jon

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:

div{ color: rgb(0, 0, 0); background-color: rgb(255, 255, 255); border: 10px solid rgba(255, 255, 255, 0.3); -webkit-background-clip: padding; -moz-background-clip: padding; background-clip: padding;
}

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.