Create rounded corners and shadow without touching the HTML

Hi,

Here I start with a wonderful method to create rounded corner divs with drop shadow. You no need to touch the HTML for this!!! [You can see how it looks our final thing as shown in above image]

Here i have used Jquery to make this work. You need to specify one common class name for all the div’s which require rounded corners. In jQuery i am going to scan all these class names and append 4 <div>’s which create rounded corners. Also i am going to find out the width for all the divs and for each div i am going to insert another <div> which creates the drop shadow.

<div class="roundedCornerDiv">
	<div class="module-header">
		<h4>Title of the box 8</h4>
	</div>
	<div class="module-body">
		Aliquip luptatum concludaturque ad nam, qui eu quod vocibus, pri lorem graecis accommodare ne. Te sumo necessitatibus nec, sea cu virtute alterum, sed ad cibo posidonium. Ius postea tibique mnesarchum ad.
	</div>
</div>

Note the class name “roundedCornerDiv” which is our actual div for which we are going to make rounded corners and bottom shadow. This div contains two blocks header and body modules.

We are going to write a simple jQuery method to append 4 divs for rounded corner and one div for drop shadow. The code is as shown below

$(document).ready(function() {
	$('.roundedCornerDiv').each(
		function(){
			$(this).append('<div class="tr"></div><div class="tl"></div><div class="br"></div><div class="bl"></div>');
			$("<div class=\"dropShadow\"></div>").width($(this).outerWidth() - 7).appendTo($(this));
		}
	);
});

Befor doing all these things please include jQuery library and YUI grid library which makes our layout looks good and provide with jQuery pre defined functions

<link rel="stylesheet" href="http://yui.yahooapis.com/2.7.0/build/reset-fonts-grids/reset-fonts-grids.css" type="text/css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>

Create the rounded corner sprite image from any graphics editor like photoshp

Here is the CSS for our positioning rounded corners

.roundedCornerDiv {
	padding: 10px;
	border: 1px solid #f88907;
	background: #FFF;
	position: relative;
	margin-bottom: 16px;
}
.roundedCornerDiv .tl,
.roundedCornerDiv .tr,
.roundedCornerDiv .bl,
.roundedCornerDiv .br {
	position: absolute;
	width: 4px;
	height: 4px;
	overflow: hidden;
	background: url(../images/sprite.png) 0 0 no-repeat;
}
.roundedCornerDiv .tl {
	top: -1px;
	left: -1px;
}
.roundedCornerDiv .tr {
	top: -1px;
	right: -1px;
	background-position: -4px 0;
}
.roundedCornerDiv .bl {
	bottom: -1px;
	left: -1px;
	background-position: -12px 0;
}
.roundedCornerDiv .br {
	bottom: -1px;
	right: -1px;
	background-position: -8px 0;
}
.roundedCornerDiv .dropShadow {
	height: 10px;
	background: url(../images/dropshadow.png) 0 0 repeat-x;
	position: absolute;
	bottom: -11px;
	left: 3px;
	overflow: hidden;
}
.roundedCornerDiv .module-header {
	font-style: italic;
	border-bottom: 1px solid #333;
	font-size: 110%;
	margin-bottom: 8px;
}

/* Below things are for idiot IE6 only: WTF? */
.roundedCornerDiv .dropShadow {
	_bottom: -12px;
}
.roundedCornerDiv .bl,
.roundedCornerDiv .br {
	_bottom: -2px;
}
.yui-g .yui-g .roundedCornerDiv .tr,
.yui-g .yui-g .roundedCornerDiv .br ,
.yui-gb .roundedCornerDiv .tr,
.yui-gb .roundedCornerDiv .br  {
	_right: -2px;
}
.roundedCornerDiv  {
	_height: 1%;
	_zoom: 1;
}
.roundedCornerDiv .dropShadow {
	_zoom: 1;
}

I am a opensource guy. You can use the above code without any license. Happy coding

Demo

Download the source code