10.5 Rounded Corners - Liquid

Stretchy Container

The previous solution is fine apart from the fact that fixed-width images are used. If you choose to alter the width of the container then the width of the image has to be altered too, which can be a pain if there are several such containers being used all with different widths. The solution is to use 4 seperate images rather than 2 - one for each corner of the container (top left, top right, bottom left and bottom right). These seperate images will then then automatically follow for any resizing of the width of container.

The CSS is as follows:

.top		{background: url("images/tr.gif") no-repeat
		top right;}

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

.bottom		{clear: both;
  		background: url("images/br.gif") no-repeat
		bottom right;}

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

And the html is as follows:

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

Here the .top container brings in the top right corner image, which is located using "top" and "right". Nested inside this container is .top div container that brings in the top left corner image, which is located using "top" and "left". Again font-size zero is used, this time to line the images up in the same line instead of one below the other. The process is repeated for the bottom two images.

The only limitation to both of these methods is that text cannot be placed inside the divs containing the actual images due to the font-size being set to zero, but other than that, they work absolutely fine.