Rounded Corners with CSS are a hot topic in web design: I think that there are hundreds of articles on them. This page is intended to present the solution I came up, that doesn't requires images, extra markup nor CSS. Let's start.

Stripe it to get it rounded

The basic idea of Nifty Corners is to get some coulored lines to get the rounded effect. This is the markup to get a rounded div:

<div id="container">
<b class="rtop">
  <b class="r1"></b> <b class="r2"></b> <b class="r3"></b> <b class="r4"></b>
</b>
<!--content goes here -->
<b class="rbottom">
  <b class="r4"></b> <b class="r3"></b> <b class="r2"></b> <b class="r1"></b>
</b>
</div>

And here's it the basic CSS:

.rtop, .rbottom{display:block}
.rtop *, .rbottom *{display: block; height: 1px; overflow: hidden}
.r1{margin: 0 5px}
.r2{margin: 0 3px}
.r3{margin: 0 2px}
.r4{margin: 0 1px; height: 2px}

You can see the final effect on this simple example. A few words on the use of the <b> element. I needed an inline element to obtain the rounded corners, since it could be nested in almost every kind of tag mainting the markup valid. So the choice fell on b because it doesn't have semantical meaning and it's shorter than span, like Eric Meyer said.

The technique works even on floated, absolute positioned or percentage-width elements. It fails on element with fixed height, or with padding. Both of the problem could be easily solved with an extra wrapper around the content.

Known bugs are: text-indent won't work on the element that has been rounded in Opera, and IE (both Mac & version 6 PC) would mess up on floated elements without specific width.

The support should be extended to all modern browsers: the technique has been tested with success in Internet Explorer 6, Opera 7.6, FireFox 1.0, Safari 1.1 Mac IE. It fails on IE 5.x PC.

Easy, isn't it? But we can do much better.

Looking forward with DOM

In the example we saw how to get rounded corners without images, sparing about 6-8Kb of page weight. But we love webstandards and semantic markup and we'd like to maintain the HTML clean and light.

Nifty Corners with CSS and Javascript

So, the next step was to provide the unnecessary <b> elements with javascript and DOM making some functions to get rounded corners on almost every element on the page without adding a single line of extra HTML or CSS apart from the basic rules we saw. Let's have a look at the example with Nifty Corners. As you can see from the source code, no extra markup is in it. The solution is a combination of CSS and Javascript. The technique is made up of four essential parts:

1. CSS file for the screen
2. CSS file for the print
3. Javascript library to get Nifty Corners
4. the javascript calls to round the elements you want

The first three components just don't need changes, whatever you want to accomplish. They need just to be declared in the head section of any HTML page like this:

<link rel="stylesheet" type="text/css" href="/niftyCorners.css">
<link rel="stylesheet" type="text/css" href="/niftyPrint.css" media="print">
<script type="text/javascript" src="/nifty.js"></script>

To understand how to implement the fourth part, you need first to understand how the javascript library for Nifty Corners is implemented. Don't worry: you aren't requested to know javascript to use Nifty Corners...

The javascript functions

If you see the code of the example, you'll notice that I left embedded the CSS and part of the javascript to show how the page is build. Let's see the embedded javascript code:

<script type="text/javascript">
window.onload=function(){
if(!NiftyCheck())
    return;
Rounded("div#nifty","#377CB1","#9BD1FA");
}
</script>

The function NiftyCheck performs a check for DOM support and excludes IE5.x PC for running the script. If the test has passed, the Rounded function is called. It accepts four parameters:

1. A CSS selector that indicates on wich elements apply the function
2. Outer color of the rounded corners
3. Inner color of the rounded corners
4. an optional fourth parameter, that if is setted to "small" would render small Nifty Corners

The real strenght of the function is that is capable of accepting a CSS selector to target the elements to round. The accepted parameters are:

• Tag selector, i.e. "p" or "blockquote" or "h2"
• Id selector, with specified tag of the element: for example "div#content" or "p#news" or "li#home"
• Class selector, with specified tag of the element: for example "div.entry" or "h2.highlight"
• Descendant selector, with some limitation: this has to be composed by an id selector followed by a tag selector. Valid examples are: "div#news div" or "ul#menu li"

About the colors: they should be specified in hex code with # symbol in three or six digits. The outer color could be also set to transparent.

The fourth parameter is optional and must be setted to "small" to get small rounded corners. Let's see an example:

window.onload=function(){
if(!!NiftyCheck())
    return;
Rounded("div#header","transparent","#C3D9FF","small");
}

I' ve provided also two additional functions that you could find very useful: RoundedTop and RoundedBottom that receive the same parameters of the Rounded function and allow to get rounded corners just on the top or on the bottom of page elements, or all four corners but with upper ones that differ in color from the lower.

Now.. let's see some examples.

The examples

Now the fun part.. I did some examples to show the possibilities of Nifty Corners. For each example will be reported on this page just the javascript calls to Rounded, RoundedTop and RoundedBottom functions, but keep in mind that these calls should be included in the following code:

window.onload=function(){
if(!NiftyCheck())
    return;
/* here the calls to add Nifty Corners */
}

Now, let's begin!

Example one: a single div

This is the example we saw in the opening. The javascript call is:

Rounded("div#nifty","#377CB1","#9BD1FA");

Example two: 2 divs

In this example, two divs were rounded. The js calls are:

Rounded("div#content","#fff","#9DD4FF");
Rounded("div#nav","#fff","#E5FFC4");

Example three: small corners

In this example the heading has small rounded corners. The code:

Rounded("div#header","transparent","#C3D9FF","small");
Rounded("div#box","#FFF","#E4E7F2");

Example four: newsboxes

In this example we'll see how to make 2-colour newsboxes. The code is:

RoundedTop("div.news","#FFF","#91A7E3");
RoundedBottom("div.news","#FFF","#E0D6DF");

Example five: transparent, tabbed menu

This example show the power of the discendant selector and transparency to get a tabbed menu with a single javascript call:

RoundedTop("div#nav li","transparent","#E8F0FF");

Example six: a liquid image gallery

I rounded-framed an unordered list used for an image gallery here. The javascript call is:

Rounded("div#minipics li","#DDD","#FFF");

Example seven: rounding a form

In this example, I rounded a form and its labels with two js calls:

Rounded("form","#FFF","#BBD8FF");
Rounded("label","#BBD8FF","#FFF","small");

Example eight: final example

This is the final example wich uses some of the techniques we saw in the previous ones. In this case, I did not use embedded css or javascript. The head section contains the following lines:

<link rel="stylesheet" type="text/css" href="/roundedPage.css">
<link rel="stylesheet" type="text/css" href="/niftyCorners.css">
<link rel="stylesheet" type="text/css" href="/niftyPrint.css" media="print">
<script type="text/javascript" src="/nifty.js"></script>
<script type="text/javascript" src="/final.js"></script>

The final.js contains all the javascript calls, let's see its content:

window.onload=function(){
if(!NiftyCheck())
    return;
RoundedTop("div#container","#FFF","#e7e7e7");
RoundedBottom("div#container","#FFF","#E9F398");
RoundedTop("ul#nav li","transparent","#E8F0FF");
Rounded("div#box","#C0CDF2","#E4E7F2");
Rounded("div#minipics li","#C0CDF2","#FFF");
RoundedTop("div.gradient","#C0CDF2","#B8B8B8");
RoundedBottom("div.gradient","#C0CDF2","#ECECF2");
}

A good practice is in fact avoiding using embedded javascript or CSS in the head section.
Quite easy, isn't it? If we'd use one of the css techiques based on background images, probably we'd used 18 images, maybe some extra and non-semantic wrapper and a lot of css declaration. Could you imagine the kilobytes that were spared? Probably, about 18-20Kb or so.

Download