Rounded Corners

March 5, 2007  

Suddenly rounded corners are the rage. And quite easily done with a little help from Nifty Corners. There’s a couple of libraries out there that can acheive this affect, either with extra images or javascript. I like Nifty Corners because it doesn’t use extra images and if you have javascript turned off, the page will still work and look ok with square corners. The only drawback is that if you want padding inside a div with rounded corners you need to add an extra inner div that has the padding, you can’t put the padding on the div with rounded corners. But the HTML is easy as this:

<div class="post">
   <div class="inner">
      Content here.
   </div>
</div>


And the Nifty Corners call is simply:


Rounded("div.post","all", "#33332d", "transparent", "smooth");


Add some CSS for the padding, margins and colours and that’s it. If you no longer want rounded colours, simply remove the Nifty Corners javascript files and calls in the header. As you can see, I took advantage of it on this site.