Rounded Corners and Drop Shadows with jQuery

I’m looking for a jQuery plugin or pair of plugins that will apply both a rounded corner and a drop shadow to a DIV box without the use of corner/border images.

I’ve actually found quite a few that do one or the other but they seem to be pretty outdated, not in itself a problem but mostly for lack of support.

So far, the few that I’ve found will do rounded corners and a few will do drop shadows. Sometimes they fail to work with each other and sometimes they only work in FF or Safari and fail in IE. I’m coming up short on the magic combination.

This failure in IE kinda defeats the whole purpose of doing this with jQuery since I can already get FF and Safari do to both with only CSS3.

Does anyone know of a great jQuery plugin or pair of plugins known to work in all browsers including the latest couple/few versions of IE?


This one is OK, but it doesn’t work well in combination with dynamic effects and has a lot of limitations. Though, its the best one I’ve found.

This is one of those situations where I’m beginning to think I should just let the IE users see square corners until MS says different.

Every time I find “the” solution in the form of yet another jQuery plugin, it seems to break down in IE8. Otherwise the scripts are very heavy-handed in how the effect is achieved… one stand-alone solution, Curvy Corners creates hundreds of divs to simulate the curves.

I found a stand-alone library that is supposed to fix all the CSS3 issues (both rounded corners and drop shadows) from IE 6 on up… called CSS3pie. I got very excited but then I started reading about how this thing crashes browsers when you try to render more than a few elements.

The one you posted creates some very ugly HTML and it’s somewhat limited as you already noted. Although quite a remarkable little achievement considering it doesn’t use any images or Javascript.