Easy Rounded Corners

I have worked with NiftyCube in the past, and it works (I supposed) well for what it did – making containers round. I had a couple of issues with its implementation however:

  1. It doesn’t leverage any Javascript frameworks, so the code is larger than necessary. Also, despite its size, little of its internal functionality can be reused elsewhere.
  2. It relies on inserting table cells to give the illusion of rounded corners. A 25px rounded object needs to insert 12 different table rows – so the HTML gets ugly fast.
  3. Its implementation was clunky. I found it necessary to load an external stylesheet to format the newly created table elements, as well as hardcode the path to this stylesheet, since I have no idea where it is pulling it in from relative to the Javascript file.
  4. The choices for rounded sizes are limited to small, medium, large – and nothing in between.

However, we live in an era of evolving Javascript, and our alternatives are getting better. I recently found Nurey Corner’s – an extension to the Prototype / Scriptaculous frameworks. Its implementation is clean as can be:

    new Effect.Corner(x);

I am happy to report that it addresses all of my concerns about NiftyCube above. Give it a try!


Leave a Comment

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.