Rounded corners AND shadow applied to one div?

Question

How? Any suggestions besides CSS?

I have tried JQuery (dropCurves, shadow, shadedborder, corner osv).

Answer 1

The general array of options:

1. Use background images with both the rounding and shadow applied and a series of divs to create the rounded corners.
2. Use CSS3 border-radius and box-shadow. (reliable in FF3.5+, Safari 4+, and Chrome 2+. No IE support.)
3. Use javascript to create a series of incrementally smaller divs (faux rounding accomplished by stair-steps) and then add rounding.

In order of difficulty to you, CSS3, normal CSS with background images, Javascript techniques.

Most of the javascript corner rounding techniques out there are just shortcuts to #1 (applying background images with CSS). Hence using one that adds rounding and a second one that adds shadow doesn't work. They end up conflicting and whichever runs last is usually the only one applied.

Answer 2

The problem many solutions have by doing this on a single div is that the two plugins will often break one another. For instance, a div that has had rounded corners applied with images won't be able to be automatically drop shadowed, because the actual border of the div extends past the rounded corners. The only options that I have seen reliably work are full CSS3 and a single background image with the dropshadow and the rounded corners built in.