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:

document.getElementsByClassName("round").each( 
  function(x){ 
    new Effect.Corner(x);
  }
);

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