10.4 Rounded Corners - Fixed Width

Fixed Container

To add rounded corners to a container div (red) of a fixed width, say 900px, it would seem logical that we could simply add two 900px wide by say 15px deep images (blue) with rounded corners, one to the top of the div and one to the bottom. In addition, the outside areas of the corner images could be made transparent or simply filled with a colour to match the background colour of the page behind the container, so as to appear transparent. This would give the overall effect of the whole countainer having nice rounded 15px radius corners. Problem solved, surely?

Corner

But it's not this simple, unfortunately. If these images are added inside the top and bottom of the container, the corners will still show as square because the background colour from the container will flood through the transparent areas of the images. And if the images are not transparent but have fill colour to match the page, then this colour will show also, giving square corners. So if we then logically place the images outside the container top and bottom, this still doesn't quite work because now there will be an annoying gap between the images and the container top / bottom. This is because the brower allows space around images for text.

The solution is to place the images inside their own container divs above and below the main container and add some more code like this:

.top		{background: url("images/top.gif")
		no-repeat top; 
  		font-size:0;
 		height: 15px;}

.bottom		{clear:both; 
  		background: url("images/bottom.gif")
		no-repeat top; 
  		font-size:0;
 		height: 15px;}

Here we've set the height of the divs to match the image height (15px in this case), and setting the font-size to zero eliminates any gap between the divs. The images are located in their divs using "top", and the clear:both line ensures the .bottom div ends up in the correct location if multiple column divs are used in the layout. And finally, some additional markup is required in the html:

<body>
 <div id="wrap">
   <div id="header">
   </div>
  <div id="top"></div> /* Extra markup */
   <div id="container"> 
   </div>
   <div id="content">
   </div>
   <div id="rightbox">
   </div>
   <div id="leftbox">
   </div>
   </div>
  <div id="bottom"></div> /* Extra markup */
   <div id="footer">
   </div>
 </div>
</body>

And there we have it, a nice rounded container div.