• rounding different types of elements – not just div’s, but p’s, h#’s, and lists (ordered and unordered) can be specified and rounded.
• transparency support
• fixed-height option (if you need a fixed height defined in css)
• same-height option. this is by far my favorite. you can use this for layouts, or many other things. I once had to make 12 divs the same size – no matter what data was in them. The layout was a 2 column layout, and so the 12 divs were in two columns of 6 each. If one div needed enough room for 15 lines, all the rest of the divs needed to grow to match the size – so everything would still look even  – that is one div should never be smaller or bigger then the rest of them – all had to be the same size – no matter what. This can be a litle tricky, but a no-brainer with the same-height option, and you get rounded corners for free too – bonus!

For these reasons, and another being that it’s soo easy to use, I am a fan of Nifty. Although I knew that I could use it, and that it plays fairly nice with jquery on it’s own, I wanted to see if I could stay within jquery realm…

I quickly found some basic corner plugins for jquery to round my corners, but most of them were not pretty at all, no anti-aliasing, and so the corners looked pretty jagged. Not very attractive at all. I know that Nifty Corners isn’t the best as far as anti-aliasing goes, but these were much worse then the results that one can get with Nifty.

I searched around some more, and pretty much found what I was looking for with the “JQuery Corner” plugin. The JQuery Corner plugin is more or less a port of the curvy corners script to jquery, so you can use the jquery syntax to locate sections on the page and round them easily. It’s a simpe as:

I mean, it can’t get much easier then this can it! Just use jquery to select the elements you want, and round them. You can also pass the normal curvey corners parameters to control how large the corners should be, which corners should be rounded, etc..

This was fine and all, but I continued my quest to see what other options there were. There was the interesting Nifty Corners port to jquery which also caught my attention.

At first I thought that this was it…all the benefits of Nifty right in jquery – could it be true? Although on it’s own it did work, I just wasn’t able to get it working on IE through cakephp for some reason. Other browsers worked fine, but on IE7 – nothing. No errors, and worst of all, no round corners. I tried different things, but in the end simply gave up. It’s too bad also, as I really liked this idea.

Well – all was not lost, as I knew that I could just use Nifty as is, inside jquery’s $(document).ready() statement. just load up your jquery javascript file, and load Nifty’s javascript right after. After that, all that is needed is:

Basically, just use Nifty as described in it’s home page. We are just using jquery’s document.ready statement to control when Nifty does it’s job.

Since I now had two options that were interesting, and one was outside of the jquery world – I thought to myself “hey, since I am already outside the jquery world – I might as well try the Cadillac of rounded corners..”. I have known about, and used Ruzee’s corners, but didn’t like the fact that it’s heavy. The new one seems a little faster, and although it produces absolutely beautiful corners, it still is heavy and a little slow when trying to round lots of corners on a page. As a simple test, just load up the demo page, and try to scroll around and watch your CPU. Just resize the window, and scroll around and listen to your CPU fan start to kick in.

It also plays nice with jquery – all that is needed it to simply load up the shadedborder.js file after you load up jquery, and then do something like:

Again, we are using jquery’s document.ready statement to control when shadedborder will start doing it’s magic.

All 3 options are viable in my opinion. Ruzee border is by far the prettiest – with it’s drop shadow ability and all, but it’s also the heaviest by far. If you do use it, use it sparingly. The JQuery Corner plugin is pretty good also, and lighter then Ruzee’s corners. It also produces nice anti-aliased clean corners, and works in all browsers that I threw at it. And good ol’ Nifty corners with it’s ‘passable’ corners but very usefull features is the lightest and fastest of the bunch. If you have many corners to round in a single page, Nifty is the way to go. You will sacrifice a bit of the look for speed and usability.

As far as script sizes go, it is very surprising that Ruzee and Nifty are tied for 1st place – with each weighing in at 9KB. Pretty impressive. JQuery Corner is double in size (the minified version) weighing in at 19KB. Although you can use the packed version if you want at 13KB. Still larger then Ruzee or Nifty though.

The one thing that I have left to test is seeing how heavy/fast Ruzee’s corners are if I get rid of drop shadow (.., shadow:0, …). At 9KB, it’s a very impressive library, and produces beautiful results….but maybe that will be a discussion for another day.

What is perhaps the most interesting, is that you can use all 3 of them together with ease. So you can use Nifty for the “I need lots of corners all over the place and so need speed” things, and then use Ruzee or JQuery Corner when you need larger, prettier corners, but only on an single (or a few) element(s).

For my uses, I think it will be a combination of Nifty and Ruzee, as both are smaller then JQuery Corner’s, and Ruzee produces “photoshop quality” corner effects that are really great.