Rounding those corners

Posted on Thursday, May 20, 2010 by Nicki

A client recently requested a web-based wallboard/dashboard for their one callcentre, and I wanted to give it a nice smooth look, this is where rounded corners come into play.

I had a look at various solutions available, some using images and some scripting. In the end I settled on a non-image Javascript solution called Nifty Corners.

It really is easy to add to your existing design.

<script type="text/javascript" src="niftycube.js"></script>
<script type="text/javascript">
window.onload=function(){
Nifty("div#box","big");
}
</script>


I had some issues with alignment and sizing due to the CSS layout with floating divs used, but those issues have nothing to do with Nifty Corners itself.

Here is a part of a screenshot of the final product. I think most people will agree it looks better than the normal sharp corners if you don't apply styling.



Nifty Corners Cube are released under the GNU GPL licence, so you can use it freely in your sites.