Using JavaScript and JQuery to create round block boxes with shadows

There are a plethora of methods available on the Internet for creating boxes with rounded corners. There are quite a few more that explain how to create shadows. This tutorial will show you how to do both using JavaScript, Jquery, and a little bit of CSS. Please note: This tutorial uses PNG images with alpha transparency to create the drop shadows. This effect is incompatible with Internet Explorer prior to version 6. The method for creating round block boxes should be compatible with most modern browsers.

Why use JavaScript?

The first thing that I would like to address in this tutorial is why this method uses JavaScript. Creating round block boxes can be a pretty messy process. The particular layout used in this tutorial involves the creation of several additional elements solely for the purpose of displaying background images. By moving the creation of these elements to a JavaScript routine, you can eliminate the ugly tags from your markup. Further, this method will degrade gracefully in the event that the user has JavaScript disabled or you wish to prevent this method from being used on buggy or incompatible browsers.

The Layout

Once implemented, the round block box will be a collection of 10 new div elements. Three div elements will be stacked on top of each other to contain the top of the box, the middle of the box, and the bottom of the box. As you can see in the image below, the entire curve of the corner appears above or below the content. This is an important point as the size of the curve will determine the size of the graphic which will in turn determine the amount of space between the top and bottom edges of the box and your content.

The top div will contain two additional div elements. The first div element will contain the graphic for the top-right corner of the div and will be assigned a class of _round-topr. The graphic for this div should be relatively small in size, only large enough to contain the graphic for the curve. This tutorial will use the following graphic which is 20x16 pixels.

Following is the style for this element:

._round-topr {
	background: transparent url('images/content-topr.png') no-repeat top right;
	padding-right: 20px;
}

This style assigns our top-right graphic to this div element and sets the right padding of this graphic to match the width of the image. When we add the top-left graphic, this padding will force the graphics to meet creating a seamless line. Be sure to modify the location within the url to point to the location of your images.

The next step is to place the div for the top-left corner inside the div for the top-right corner. The graphic for the top-left corner will vary from the top-right corner somewhat. Rather than limit this graphic to a width of 20px, we will actually use a graphic that is wide enough to cover the maximum display width that we would expect. This will allow you to create round block boxes with dynamic widths. Following is the graphic for the top-left corner. Its width has been truncated for display purposes.

Following is the style for this element:

._round-topl {
	background: transparent url('images/content-topl.png') no-repeat top left;
	height: 16px;
}

This style forces the height to 16px and assigns our corner graphic to this element. Since this div element will not actually contain any content, it is important to force the height so that the browser will not collapse the element to a height of 0. This will also force the height of any containing boxes completing the top of the round block box. This height should match the height of the graphic. The elements for the top of the box will ultimately be formatted as follows:

<div> <!-- This is the top containing div  -->
	<div class="_round-topr"> <!-- Top-right corner  -->
		<div class="_round-topl"> <!-- Top-left corner -->
		</div>
	</div>
</div>

The middle of the box is constructed much like the top of the box. The middle div contains a div for the right-side of the box. The style for this div is as follows:

._round-right {
	background: transparent url('images/content-right.png') repeat-y right;
	padding-right: 20px;
}

Like the style for _round-topr, the style for _round-right sets our background graphic and forces the right padding to an appropriate width. In this example, the graphic that we use is actually wider than 20px, however, 20px is the minimum width necessary to ensure that our content does not bleed beyond the edge in our graphic. This style also sets this background image to repeat in the y-direction allowing your boxes to dynamically grow to any length. Following is the background image used in this tutorial:

The left-side is constructed using the same techniques that we have already used. In fact, you can simply mirror the graphic for the right side to create the graphic for the left side. The following style will provide the format for _round-left.

._round-left {
	background: transparent url('images/content-left.png') repeat-y left;
	padding-left: 20px;
}

We finish this off with another div to contain our original content. This div will also set the background color (in this case, white) and provide any additional padding desired.

._round-inner {
	background: #ffffff;
	padding: 4px 0px;
}

The elements for the middle div will be formatted as follows:

<div>
	<div class="_round-left">
		<div class="_round-right">
			<div class="_round-inner">
				<p>This is a pre-formatted box.</p>
			</div>
		</div>
	</div>
</div>

Finally, the bottom div is formatted exactly like the top div. Again you can simply mirror the graphics for the top to create the graphics for the bottom. The full CSS is as follows:

/** round blocks **/
._round-botl {
	background: transparent url('images/content-botl.png') no-repeat bottom left;
	height: 16px;
}

._round-botr {
	background: transparent url('images/content-botr.png') no-repeat bottom right;
	padding-right: 20px;
	height: 16px;
}

._round-topl {
	background: transparent url('images/content-topl.png') no-repeat top left;
	height: 16px;
}

._round-topr {
	background: transparent url('images/content-topr.png') no-repeat top right;
	padding-right: 20px;
	height: 16px;
}

._round-left {
	background: transparent url('images/content-left.png') repeat-y left;
	padding-left: 20px;
}

._round-right {
	background: transparent url('images/content-right.png') repeat-y right;
	padding-right: 20px;
}

._round-inner {
	background: #ffffff;
	padding: 4px 0px;
}

And the full layout of the tags are as follows:

<div> <!-- This is the top containing div  -->
	<div class="_round-topr"> <!-- Top-right corner  -->
		<div class="_round-topl"> <!-- Top-left corner -->
		</div>
	</div>
</div>
<div>
	<div class="_round-left">
		<div class="_round-right">
			<div class="_round-inner">
				<p>This is a pre-formatted box.</p>
			</div>
		</div>
	</div>
</div>
<div> <!-- This is the top containing div  -->
	<div class="_round-botr"> <!-- Bottom-right corner  -->
		<div class="_round-botl"> <!-- Bottom-left corner -->
		</div>
	</div>
</div>

The Shadow

The shadow used in this technique is a uniform shadow around the box. With a little modification, it may be possible to create other shadow effects such as a drop shadow. In order to make the shadows dynamic, the graphic format used for the corners and sides of the box are PNG graphics. PNG graphics allow one to use alpha transparency which is a fancy way for saying that something may be partially transparent. By using images with alpha transparency, we can easily overlay our shadows on top of other graphics and have them blend nicely with the underlying graphic. Unfortunately, alpha transparency is not supported in Internet Explorer prior to version 6. If you wish to sacrafice the shadow effect for compatability, you can simply replace the PNG images with GIF images utilizing completely transparent pixels.

The JavaScript

At this point you have all of the tools necessary to manually create round block boxes. As menitoned in the beginning of this article and as you may have already guessed from the HTML examples above, the additional markup required can become somewhat cumbersome. For this, we may use Jquery and JavaScript to dynamically modify existing elements. First, we may begin with some simple content:

<div class="roundBlock">
	<p>This is an automatic</p>
	<p>With two children.</p>
</div>

The key here is the class assigned to the div, roundBlock. We will use this class in the Jquery selector as an easy means to identify all of the elements that we wish to apply this effect to. We can then use the following JavaScript to dynamically create the elements described above.

$(document).ready( function() {
	$(".roundBlock").each( function(id) {
		var block = $(".roundBlock").get(id); // Grab a reference to the block
	
		// Grab all of the children elements so that we may place them into the round block
		var children = new Array();
		while( block.childNodes[0] ) { // Process children until there are none
			children.push(block.childNodes[0]);
			block.removeChild(block.childNodes[0]);
		}
	
		// Create the top elements
		var topDiv = document.createElement('div');
		$(block).append(topDiv); // Add the top div to the block
		var roundTopR = document.createElement('div');
		$(roundTopR).addClass('_round-topr'); // Assign the style for the top-right graphic
		$(topDiv).append(roundTopR); // Add the top-right graphic to the top div
		var roundTopL = document.createElement('div');
		$(roundTopL).addClass('_round-topl'); // Assign the style for the top-left graphic
		$(roundTopR).append(roundTopL); // Add the top-left graphic to the top-right div
		
		// Create the middle elements
		var contentDiv = document.createElement('div');
		$(block).append(contentDiv); // Add the content div to the block
		var roundRight = document.createElement('div');
		$(roundRight).addClass('_round-right'); // Assign the style for the right graphic
		$(contentDiv).append(roundRight); // Add the right graphic to the content div
		var roundLeft = document.createElement('div');
		$(roundLeft).addClass('_round-left'); // Assign the style for the left graphic
		$(roundRight).append(roundLeft); // Add the left graphic to the right div
		var roundInner = document.createElement('div');
		$(roundInner).addClass('_round-inner'); // Assign the style for the inner graphic
		$(roundLeft).append(roundInner); // Add the inner div to the left div
		
		// Create the bottom elements
		var botDiv = document.createElement('div');
		$(block).append(botDiv); // Add the bottom div to the block
		var roundBotR = document.createElement('div');
		$(roundBotR).addClass('_round-botr'); // Assign the style for the bottom-right graphic
		$(botDiv).append(roundBotR); // Add the bottom-right graphic to the bottom div
		var roundBotL = document.createElement('div');
		$(roundBotL).addClass('_round-botl'); // Assign the style for the bottom-left graphic
		$(roundBotR).append(roundBotL); // Add the bottom-left graphic to the bottom-right div
		
		// Restore our children
		while(children[0]) {
			$(roundInner).append(children.shift());
		}
	});
});