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.

Answer 3

Thanks for all the answers!! :)

@Stefan Kendall the issue with jQuery has Alex Sexton written about in his answer.

@voyager don't want to use CSS because i feel javascript gives me more freedom(?) if I want to change shadow og corner radius later.

@Gabriel Hurley looks like its going to be normal CSS with background images after all then.

Answer 4

@Gabriel Hurley. By the way, CSS3 aren't well supported in browsers yet(?).