We've all come accross a design that dictated that the form buttons should have rounded corners (especially in the web 2.0 era). The creation of fixed lentgh rounded corner button is second nature to any self proclaimed web deveopler, but the creation of fluid (well at least fluid length if not height) rounded corners is another thing all together, and that is what I'll be talking about in this entrie.

To create our illusion of fluid length rounded button I've prepared two images that we will be using.

But just to elaborate, I'm not talking about using fake buttons (nested <span> for instance), and then using javascript to immitate button funcionality. As we all know, that does not degrade gracfully for folks using older browsers and screenreaders. I will be usign semanic XHTML instead.

...
<form action="rounded.html" method="get">
<input type="submit" value="Submit me!" />
</form>
...

The easiest way of acheiving rounded corners in our example is to add a non-semantic empty div after the submit button and the using CSS to style everything.

input.button {
    border: 0;
    background: #fff url(button.gif) no-repeat;
    height: 22px;
    /* used to catch the buttonEnding */
    position: relative;
}

.buttonEnding {
    position: absolute;
    display: inline;
    width: 7px;
    height: 22px;
    background: url(end.gif) no-repeat;
}

...
<form action="rounded.html" method="get">
<input type="submit" value="Submit me!" />
<div class="buttonEnding"></div>
</form>
...

All this works as intended, but I'm a XHTML perfectionist, and as such that empty div is like nails on a chalkboard. If done so we would have to add that empty div after all buttons that we wanted to have rounded enges. Now imagine if you will a very long form with multiple buttons. Result, more scratching on the chalkboard. There has to be a better way to do such things.

And fortunately for us, there is. DOM. Here is what we'll do in plain english:

• Find all input tags with a class "button".
• Loop through them one by one.
• Create new div elements on the fly.
• Set the class "buttonEnding" to the newly created divs.
• Attach them to the DOM tree right after our buttons.
• Add the function as an event so that is executed when page loads.

Sounds pretty straightforward. Here's how the finished javascript looks.

function buttonEndings() {
	if (!document.getElementsByTagName) {
		return false
	}
	
	var buttons = getElementsByClass("button");
	/* loop through all buttons and attach a div */
	for (i=0; i < buttons.length; i++) {
		var div = document.createElement("div");
		div.className = "buttonEnding";
		insertAfter(div, buttons[i]);
	}
}

addLoadEvent(buttonEndings);

This seems to work in all browsers I could test in. If you happen to find a browser in wich this doesn't work as intended, please do give me a heads up through the contact form.