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:
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.
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.