Rounded corners and shadows on new WebKit

I wasn’t planning on redesigning my weblog—but then I was recently reminded that you can do shadows and rounded corners using new CSS bits in the latest WebKit.

-webkit-box-shadow creates shadows. -webkit-border-radius creates rounded corners.

If you’re running Safari on Leopard (or probably any Safari 3 beta, or app that uses that same version of WebKit), and you’re on the home page of this site, you’ll see that each day has rounded corners at the top right and left and that each day casts a shadow. The page container also casts a shadow on the background graphic. And there’s a small shadow below the navigation links.

I’ve always went blech at the tricks people had to use to get rounded corners and shadows—hacks with images. Being able to do it with simple CSS is cool.

One thing I still want is gradients. The background at the top of this box should be a gradient. But it looks like I have to use an image for that. (Please correct me if I’m wrong!)

02 Nov 2007