The CSS3 backgrounds and borders module has a nice new feature called box-shadow, which is implemented in Safari 3+ and Firefox 3.1 (Alpha). It isn’t implemented in Safari 3.

The property takes 3 lengths and a color as it’s attributes, the lengths are:

1. the horizontal offset of the shadow, positive means the shadow will be on the right of the box, a negative offset will put the shadow on the left of the box;
2. the vertical offset, a negative one means the box-shadow will be on top of the box, a positive one means the shadow will be below the box;
3. the blur radius, if set to 0 the shadow will be sharp, the higher the number, the more blurred it will be.

The shadow should be following curved corners created with border-radius. For those of you without a supporting browser, here’s a screenshot.

box-shadow: 10px 10px 5px #888;
padding: 5px 5px 5px 15px;

box-shadow: -10px -10px 0px #000;
border-radius: 5px;
padding: 5px 5px 5px 15px;

Though it seems to not work by just declaring box-shadow. Currently if you want this to work you have to target Moz and web kit browsers separately.

-moz-box-shadow: -10px -10px 0px #000;
-webkit-box-shadow: -10px -10px 0px #000;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;