Update: I have updated the demo page and added an "advanced" version which will allow you to add style to the whole box, not just the corners -- so really this is no longer just for creating "Simple Rounded Corners" it really could be used to create almost any layout desired.

On par with my usual Friday morning ritual, I fired up del.ico.us, ate a bran muffin and a bag of potato chips and traveled through the popular links and saw that there were several different solutions for creating rounded corners in CSS.

Some were pretty slick advanced Javascript and CSS solutions – some required sloppy required markup – some required you to visit the sites creator for a huge generated CSS file and a crumpet – and I just thought “why they gotta go make things so complicated?” (Thanks to Avril Lavigne for the brilliant lyric)

My first approach was with the pseudo :before and :after selectors and use of the content: url() css command .. that was not happening. I guess you can only stick an image before – you cannot control its layout and position. lame.

So where I ended up was even more simple than that.

I decided to dynamically draw in the required XHTML onload with javascript and use some simple CSS to get it's layout – therefore there won't be sloppy markup which won’t validate in my code. » visit the demo page

The Markup 

<div id="simpleRounded">

	<h1>Simple Rounded Corners</h1>
	<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla pulvinar egestas massa. Proin lorem. 
	Nulla feugiat mi nec metus feugiat luctus. Donec gravida varius risus. Mauris sed sapien. Aliquam enim 
	risus, semper ut, cursus pellentesque, auctor sit amet, libero. Mauris magna. Mauris placerat accumsan 
	arcu. Quisque et dolor.</p>
</div>
The Javascript 

function roundCorners(){
	
		// This is a simple loader for more than one round corner box on a page
		addCorners('simpleRounded');
		addCorners('advancedRounded');
	
}

function addCorners(id){
	obj = document.getElementById(id);
	preWrapper="<div class=\"topleft\"><div class=\"botright\"><div class=\"botleft\"><div class=\"topright\"><div class=\"boxContainer\">";
	postWrapper="</div></div></div></div></div>";
	objContent = preWrapper + obj.innerHTML + postWrapper;
	obj.innerHTML = objContent;
}

As you can see all I'm doing here is rewriting the content of the id which is passed into the function to include 5 nested div's. (One for each corner and one container div)

The accompanying css is just as simple.

The CSS 

#simpleRounded{
	margin: 1em;
	width:55%;
	background-color:#003699;
	color: #fff;
	font-family:Helvetica, sans-serif;
	font-size:11px;
}
#simpleRounded p{
	margin:0;
	padding:0 0 1em 0;
}
#simpleRounded h1{
	magin: 0 0 1.5em 0;
	padding: 0;
	font-size: 1.5em;
}


/* These are the 5 javascript embedded div's for the 4 corners and then a container div. */

#simpleRounded .topleft{
	background: url(rc_simple_topLeft.gif) top left no-repeat
}	
#simpleRounded .topright{
	background: url(rc_simple_topRight.gif) top right no-repeat
}
#simpleRounded .botleft{
	background: url(rc_simple_botLeft.gif) bottom left no-repeat
}	
#simpleRounded .botright{
	background: url(rc_simple_botRight.gif) bottom right no-repeat
}
#simpleRounded .boxContainer{
	padding: 15px;
}

Check out the demo page The code is still beta -- please let me know if you notice a problem in your browser. Tested in IE 6, Firefox 1.5 and Safari 1.2