Rounded Corners Without Images

Styling the web with rounded corners has been a much sought after topic to create an asthetic appealing design. Human are fascinated with everything round. The smoothness is visually inviting, and represents of quality one notch above of average Joe ( Why do we love rounded corners).

Many designers will be looking forward to full browsers support of CSS3 when it is released, which promises tweaking of corner via the “border-radius” properties.

But until the day arrive, we will look at what is in the store for us today.

Developers have gone to great extend to make the round with creative use of CSS and images. There are pros and cons of each approach, some lack the flexibility while others may require certain level of graphic editing skills. Smiley Cat maintains list of ongoing effort in Rounded Corners ‘Roundup’.

What sparked of my interest for this discussion is that, the rounded corners can now be achieved using Javascript, no image required. Yes, you heard me right. And among the crowds, Nifty Corners stands out particularly well (and implemented here) after evaluation for its ease of use.

Nifty Cube allows you to generate rounded border for various occasions from tab navigation, to box within a box.

To spice thing a little, you can even have only certain corners rounded.

What do you have to do to implement this? Simple,
1. define your box CSS
#tagcloud {
padding: 20px 0;
margin: 15px auto;
background: #333;
color: #FFF;
}


2. Assign it to the box where you want styling to be applied
<div id="tagcloud">
...
</div>


3. And finally include the javascript in the header

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


If you are using WordPress Permalinks and following the example from nifty, the script may not run because of WordPress URL rewriting. Simply put it to absolute path as follow and it should works properly irregardless of your permalinks setting.
In your header
<script type="text/javascript" src="/niftycube.js"></script>

In niftycube.css
l.setAttribute("href","/niftyCorners.css");


There are 2 issues with this nifty cube:
1. the script does not recursively decorate all the DIVs with the same id. If you have multiple <div id="tagcloud">, only the first div is decorated and the subsequent one ignored. But I am certain this can be easily adjusted to search recursively.

2. If you called Nifty("div#tagcloud","big") in the header, but the body does not contain that particular div, the browser will throw a scripting error.

Otherwise, this is by far the cleanest implementation I’ve come across. No messy CSS or creating border image. How about that?

You can see it in action here, just take a look at the framing of “Related Links” and “Tag”.