How do I create CSS3 rounded corners and drop shadows?

Ah, the ugly mess that is the evolution of Web standards. Whether it's HTML5 or CSS3, both are slowly and painfully becoming standards, but in the meantime, it turns out that there's much debate and contention about even the simplest of features.

Like rounded corners.

In the CSS3 spec, rounded corners are specified as border-radius: though it's implemented differently in the Mozilla family of browsers (including Firefox) than the Webkit (Safari) group.

What this means is that if you're running, say, Internet Explorer or an older version of one of these browsers, odds are good you won't see anything happen when you specify the right CSS attribute.

Here's an example:

The code for this to work is:

Not too bad to use, but why they can't just accept "border-radius", well, that's part of the adventure of web standards, I suppose.

Now, what about a drop shadow? That's done with the css attribute box-shadow, which takes three parameters: horizontal offset of the shadow, vertical offset of the shadow, blur factor and color. Complicated, eh?

Here's how it could be used in cooperation with the earlier rounded box:

Bet there's no shadow, though. Turns out that there's great debate about how to implement box shadow, so in fact you need to match the CSS3 model of your browser for it to even have a possibility of working.

Like this:

Did that work for you? If you're on a modern browser it probably did. Cool, right? Yeah, except here's the CSS3 required to make this work:

Here's the code I'm using for this to work:

More than a bit of work, but at least it does render properly in modern browsers, and that's pretty darn slick.

Keep track of what's happening in the world of CSS3 by tracking http://www.css3.info/ too.