CSS: XHTML : Rounded Container

Let's face it. The rounded-edge look of the web is quite popular these days and for good reason. In my opinion, it's a softer, more modern, more friendly design element. Sure you could easily set up a webpage using <table> table tags </table> (please don't misunderstand, table tags have their place, I am taking about the layout of the page/site itself) but the correct way would be to use tabless design techniques using CSS and <div>divs</div>.


Anyway, this is how I have learned to create the rounded-border effect you can commonly see in some of the more recently designed sites. For some of you this might be basic stuff but I know that when I was trying to figure out the whole css/div thing I found many resources explaining the whole 'box model' thing and great articles on tableless design but I wish that one could give the basic, bare-bones version, no fluff. So here it is.

This is the content area. This would be filled with some sort of content.

The top section is just a div with an image called top.png. After that you have two divs. The outer div with the blue background and then a div inside that div where the content goes. These divs are followed by bottom.png also contained in it's own div.

This space will keep growing vertically as the you fill this area with text, images etc...

The idea is that you have a top image, a center content area and a bottom image.

Here is the top image:


Here is the bottom image:


To create these image open Photoshop and create an image using the total desired width of your webpage as the width of this new image. Use a transparent background. For example: for this example I created an image 400px wide and 30px high. I used the color #003399.

Then using the rounded rectangle tool create a rectangle spanning the entire width and height of the canvas.

Next using the Rectangular Marquee Tool select one half (horizontally) of the rounded rectangle and using the cut it from the image. Next click File - then New and paste the half of the rounded rectangle into this new canvas. Save the file in your images directory as top.png. Then cut the bottom image out, open a new file, paste the image in and save for web as bottom.png.

Here is the basic layout for the divs:

<div style="width: 400px; height: 15px; margin: 0; padding: 0; border: 0;"><img style="margin: 0; padding: 0; border: 0;" src="images/top.png" border="0" alt="top image" /></div>
<div style="width: 400px; margin: 0; background-color: #003399; padding: 0; border: 0; text-align: center;"><div style="width: 380px; margin: 0 10px 0 10px; background-color: #ffffff; float: left; border 1px solid #c0c0c0; text-align: center;"><p>This is the content area. This would be filled with some sort of content.</p>
<p>The top section is just a div with an image called top.png. Then you have the content area followed by bottom.png also contained in it's own div.</p>
<p>
This space will keep growing vertically as the you fill this area with text, images etc...</p></div></div>
<div style="clear: both; height: 0; margin: 0; padding: 0;"></div>
<div style="width: 400px; margin: 0; padding: 0; height: 15px; border: 0;"><img style="margin: 0; padding: 0; border: 0;" src="images/bottom.png" border="0" alt="bottom image" /></div>