Rounding Corners on Websites

There are many many ways to do this floating around, here is just another that I have used in the past. It uses one large image file (which will be cached after the first use) and focuses on simplification of HTML markup.

So the HTML code:

<div class="rounded">
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin condimentum fermentum rhoncus. Nam sed ante nec magna lobortis varius. Nunc auctor nibh eu eros volutpat non tincidunt turpis interdum. Suspendisse potenti. Nunc ligula risus, venenatis vel vehicula et, condimentum vel diam. Donec et urna sit amet quam elementum rhoncus. Proin fringilla eleifend massa, in iaculis tellus fringilla nec. Proin rutrum auctor magna et molestie. Nullam viverra ultrices neque nec tincidunt. Integer faucibus tempus dolor, eu blandit nunc porta vel. Nulla ante massa, adipiscing a mattis et, bibendum in lectus. Suspendisse euismod tristique tortor, eu accumsan enim tincidunt egestas.</p>
 
	<div class="tl_corner"></div>
	<div class="bottom"><div class="bl_corner"></div></div>
</div>

The CSS:

/* Rounded Corners */
.rounded {
	position: relative;
	padding: 30px;
	min-width: 60px;
	max-width: 2600px;
}
.rounded,
.rounded .tl_corner,
.rounded .bottom,
.rounded .bottom div {
	background: transparent url('rounded.gif') no-repeat top right;
}
.rounded .tl_corner {
	position: absolute;
	left: 0;
	top: 0;
	width: 30px;
	height: 100%;
	background-position: top left;
}
.rounded .bottom {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	background-position: bottom right;
}
.rounded .bottom div {
	width: 30px;
	background-position: bottom left;
}
.rounded .bottom,
.rounded .bottom div {
	height: 30px;
}
 
/* JS rounding default style */
.roundme {
	border: 4px solid orange;
	padding: 10px;
	margin: 0 3px 3px 0;
}
 
 
/* Not required */
p {
	margin: 0;
	padding: 0 0 10px 0;
}

A demo is available here for this case.

For those who prefer simpler code and regard rounding as 'icing on the cake' this can be loaded with JavaScript too as shown here (view the source for the JS). Enjoy.