CSS3 Examples

Here's the markup:

<div class="rounded">
Content goes here.
</div>

I think you'll agree that there's not much we can do to make it simpler than that, except maybe exchange the <div> for a <p> if the content is structurally better defined as a paragraph. Making this switch is left as an exercise for the reader.

Now here's the JavaScript:

function roundedCorners() {
var divs = document.getElementsByTagName('div');
var rounded_divs = [];
/* First locate all divs with 'rounded' in their class attribute
for (var i = 0; i < divs.length; i++) {
if (/\brounded\b/.exec(divs[i].className)) {
rounded_divs[rounded_divs.length] = divs[i];
}
}
/* Now add additional divs to each of the divs we have found */
for (var i = 0; i < rounded_divs.length; i++) {
var original = rounded_divs[i];
/* Make it the inner div of the four */
original.className = original.className.replace('rounded', '');
/* Now create the outer-most div */
var tr = document.createElement('div');
tr.className = 'rounded2';
/* Swap out the original (we'll put it back later) */
original.parentNode.replaceChild(tr, original);
/* Create the two other inner nodes */
var tl = document.createElement('div');
var br = document.createElement('div');
/* Now glue the nodes back in to the document */
tr.appendChild(tl);
tl.appendChild(br);
br.appendChild(original);
}
}
/* Run the function once the page has loaded: */

window.onload = roundedCorners;

The script is divided in to two logical sections. The first section iterates over all of the <div> elements in the document, building an array of those that contain 'rounded' in their class attribute (remember, elements can have multiple classes separated by spaces). The second part of the script goes through each of these elements in turn, creating three additional divs and wrapping them around the original. Let's look at the code for that in more detail:

original.className = original.className.replace('rounded', '');

Here we remove the class "rounded" entirely from our original <div>. The reason for this will become clear in the CSS; essentially, we don't want the original styles applied to affect that element any more.

var tr = document.createElement('div');
tr.className = 'rounded2';

We have created out outer-most <div>, which will be used to apply the top-right background image as well as the overall width of the box. Note that we have set the class to 'rounded2'; this will be defined in our CSS, with subtle differences from the 'rounded' class provided to non-JavaScript-enabled clients.

/* Swap out the original (we'll put it back later) */
original.parentNode.replaceChild(tr, original);

The W3C DOM does not provide a direct method to replace a node in a document with another node. Instead, you must use the replaceChild() method of a node to replace one of its children with another node. A useful trick to replace the node you're looking at is to access its own parent using the parentNode property, then use /#c#.replaceChild to swap it for something else. If that doesn't make sense to you, don't worry -- just think of the above line as replacing our original node with the new tr node we have just created.

/* Create the two other inner nodes */
var tl = document.createElement('div');
var br = document.createElement('div');
/* Now glue the nodes back in to the document */
tr.appendChild(tl);
tl.appendChild(br);

We've now created three new <div> elements and inserted them in to the document. All that's left is to re-insert our original node, complete with its contents:

br.appendChild(original);

At this point, our actual document tree is almost identical to that in the four nested <div> example above, the only difference being that the outer element has a class of 'rounded2' instead of 'rounded'. Here's the CSS:

div.rounded {
width: 170px;
padding: 15px;
background: #1b5151;
}

div.rounded2 {
width: 200px;
background: #1b5151 url(tr.gif) no-repeat top right;
}
div.rounded2 div {
background: transparent url(tl.gif) no-repeat top left;
}
div.rounded2 div div {
background: transparent url(br.gif) no-repeat bottom right;
}
div.rounded2 div div div {
background: transparent url(bl.gif) no-repeat bottom left;
padding: 15px;
}

The first set of rules, for div.rounded, is only used in browsers that do not execute the JavaScript. Note that the width is 170px and the padding 15px, which adds up to a total width of 200px (the width plus the left and right padding). If you need this to work in IE 5/Windows, which interprets padding values differently, you'll need to apply the infamous box model hack. You've already seen the second set of rules in the previous example.

Looking Ahead

The above technique will work in all modern browsers, and all future browsers that support the CSS2 and DOM 2 standards. CSS 3 introduces a number of new ways to achieve this effect, which will render the above techniques obsolete. As well as native rounded corner support (already available in the Mozilla family of browsers) CSS features the powerful ::outside pseudo-element, which allows additional stylable elements to be inserted in a manner similar to the JavaScript example shown in this article. If that's not enough, border images will allow pretty much any border decoration you could care to think of.

Unfortunately, it will be years before CSS 3 support is widely available. Until then, JavaScript is more than capable of taking up some of the slack.