chrisspenblog

knowledge through programming

I found a convenient method for creating elements with rounded corners and a drop shadow. Previously, I had been using Steffen Rusitschka’s ShadedBorder script to accomplish this effect with minimal overhead. While his script is an impressive piece of work, it can be a little slow to render since it accomplishes the effect by creating several elements in order to simulate the anti-aliasing and rounding.

The primary attraction for script’s like Steffen’s lies mostly in IE’s perceived lack of functionally. Most other browsers, like Firefox and Safari, natively support rounded elements with a simple CSS declaration. IE, perpetually behind the curve, effectively had no easy way to accomplish rounded corners until a rounding method was discovered that makes use of Microsoft’s own VML implementation. Drew Miller then went on to create a simple wrapper that let’s you easily apply the effect across multiple browsers. Why Microsoft’s own rounded howto still recommends using tables and GIF images is anyone’s guess.

For the drop shadow, I made use of Larry Stevens’ excellent jQuery plugin. It accomplishes the effect in basically the same manner as Steffen’s script, but does so in a convenient jQuery interface.

And finally, a demo.

Filed under: CSS, Javascript, jQuery