Last night I started to cut up a new template for a client and started thinking there has to be an easier way to build designs with rounded corners.  For now we are stuck with either two methods.  Using a Javascript library or dicing up some images and using CSS to peice them together.

So I chose the slice and dice method last night but will probably write a nice PHP function some time during this project to make writting the CSS and HTML code easier.  With the slice method I needed 8 small images that represented the following peices:

• Upper Left Corner
• Upper Side
• Upper Right Corner
• Left Side
• Right Side
• Lower Left Corner
• Lower Side
• Lower Right Corner

If you look at the list there isn't an image in there for the inside content.  This is because we can set that with background-color in CSS.  Also with this list in mind I decided that it would help to use it to name all my images.  Part of any automation is being able to predict what file names should be so after slicing up all the peices I needed I named them as follows:

• box-ul.gif
• box-us.gif
• box-ur.gif
• box-ls.gif
• box-rs.gif
• box-bl.gif
• box-bs.gif
• box.-br.gif

Each file has a unique name and is very predicatable.  So now then we can write a function that would wrape the content around some fancy div tag setup.  In my work last night I used the following to proposed HTML code:

	<div class="outerBox">
 		<div class="outerbox-ul"></div>
  		<div class="outerbox-us"></div>
  		<div class="outerbox-ur"></div>
  		<div class="cls"></div>
  		<div class="outerbox-ls"></div>
  		<div class="outerbox-body">Your content here</div>
  		<div class="outerbox-rs"></div>
  		<div class="cls"></div>
  		<div class="outerbox-bl"></div>
  		<div class="outerbox-bs"></div>
  		<div class="outerbox-br"></div>
  		<div class="cls"></div>
 	</div>  	 

We could of used ID's in the div's but with a class it gives us the ability to use this box multiple times on our pages when following XHTML standards. Also I like the look of classes (.classname) in the style sheet compared to the IDs (#idname).  This is just a personal preference and you are more than welcome to use what you think fits your project the best.  Also notice that we have added and extra div after all the three sides with the class of 'cls'.  This is to clear the float we will be doing to tie all the border together.

Now that the HTML is set its time to write the CSS that will go with this code.  The CSS is really simple and we just have to remember how it all fits together.  Remeber our naming conventions.

.clr{
	clear: both;










} 
.outerbox-ul{
	float: left;
	background-image: url( images/box-ul.gif );

}
.outerbox-us{
	float: left;
	background-image: url( images/box-us.gif );






}
.outerbox-ur{
	float: left;
	background-image: url( images/box-ur.gif );
}
.outerbox-ls{
	float: left;
	background-image: url( images/box-ls.gif );
}
.outerbox-body{
	float: left;
	background-color: #ffffff; /*white*/
}
.outerbox-rs{
	float: left;
	background-image: url( images/box-rs.gif );
}
.outerbox-bl{
	float: left;
	background-image: url( images/box-bl.gif );
}
.outerbox-bs{
	float: left;
	background-image: url( images/box-bs.gif );
}
.outerbox-br{
	float: left;
	background-image: url( images/box-br.gif );
}

One thing this CSS code assumes is that the image directory is in the same directory as the css file itself. If your images are missing you may need to either find the relitive path to the image directory or use a full contectual path to your image directory.

Are there other ways of doing this?  Yes there are many different ways out there that you can find to do the same thing.  The down side to this is your going to have some messy XHTML code but the images are light weight enough to draw quickly.

Why did I use gif files instead of PNG's or JPG's?  The one reason is that GIF's work reliably between different browsers vendors.  The corners have a section in them that is transperent which makes it easy for use to use these images with different color backgrounds and not have to remake them.  Also GIF's date back to some of the original browser that we used like Netscape Navigator (Remember them?).