Liquid Boxes with Rounded Corners

There are a number of tutorials on the internet that teach you how to create colored boxes with rounded corners. Many of these require the use of Javascript which unnecessarily bloats your HTML code. Some, such as this one, use only CSS and HTML to create this rounded effect. A few even show you how to create these rounded corner boxes with fluid, changing widths. However, none of them that I know of teach you how to do all the above, add borders to the boxes, and use multiple background colors. None, of course, except this one.

Here is an example of what we will be creating (we will add borders to this later in the tutorial):

 

Note that as you change the width of your browser, the width of the box also changes in response.

The HTML

Here is the core HTML needed to set up our box:

<div id="controlbg">
<div class="controltop">
<div class="cornerul"></div>
<div class="cornerur"></div>
</div>
<div class="controlheader">
Control Panel
</div>
<div class="controlcontent">
<p>Message Center</p>
<p>Add New Article</p>
<Update Existing Article></p>
<p>Delete Article</p>
</div>
<div class="controlbottom">
<div class="cornerll"></div>
<div class="cornerlr"></div>
</div>
</div>

As you can see, there a number of div's used in the structure of this box to separate the different parts. The first div is a container for the box used mainly for positioning, but also for padding and such. The "controltop" and "controlbottom" divs contain the rounded corners and sit above and below, respectively, the content. These two divs are also given a background color to match the color of the rounded corner images. Contained within each of these two divs are two additional divs that will be given a background attribute of a rounded corner image. There must be at minimum one additional div to sit between the "controltop" and "controlbottom" divs that will contain the content of the box. Additional divs can be used depending on how many different background color areas you would like to have in your box. In this example, I have two background colors, and so use two different divs to hold the content.

The Images

To save us some time, you can simply right-click and save the 4 corner images:

The CSS

The CSS is obviously going to be the workhorse of this box. Here is the full code of this CSS to get us started:

#examplebg {
	width:70%;
}
.controltop {
	background:#e89a3a;
	padding:0;
	margin:0;
}
.controlheader {
	background:#e89a3a;
	padding:15px;
	border-bottom:2px solid #000;
	font-size:20px;
	font-weight:bold;
}
.controlcontent {
        padding:7px 15px 7px 15px;
	margin:0;
	background-color:#e8e8e8;
}
.controlbottom {
	background-color:#e8e8e8;
	padding:0;
	margin:0;
}
.cornerul {
	background:url('ulcorner.gif') top left no-repeat;
	height:12px;
}
.cornerur {
	background:url('urcorner.gif') top right no-repeat;
	float:right;
	height:12px;
	width:12px;
	margin-top:-12px;
}
.cornerll {
	background:url('llcorner.gif') bottom left no-repeat;
	height:12px;
}
.cornerlr {
	background:url('lrcorner.gif') bottom right no-repeat;
	float:right;
	height:12px;
	width:12px;
	margin-top:-12px;
}

Note that this must go into an external CSS file so that we can deal with Internet Explorer 6 and below separately.

Not too bad, right? Just a number of small details needed to get everything to fit in the right place. Because the corner images are only 12px in height, both our "controltop" and "controlbottom" div's will also be only 12px in height. This means that each of these needs to have an accompanying div with the same background color to make the colors noticeable. This is where "controlheader" and "controlcontent" come in - to expand the color height and to contain the text. Now it would be possible to to simply combine the same color div's into one. However, this creates problems in Internet Explorer as the corners will not display in the correct place. All four of these div's have margins of "0" to ensure that no gaps appear between them to ruin the boxed effect. The "controltop" and "controlbottom" div's should have a "padding:0" although it's not necessary. The "controlheader" and "controlbottom" div's on the other hand, both need padding on the top and bottom of at least "7px". Otherwise, gaps appear between different div's of the box as a result of the text boxes expanding beyond its immediate div for some reason.

Now for the corners. Two things need to be done for all four of the corners. First, they obviously need the background to be set to their respective image corner. Each of the background images also need to be positioned correctly; the upper left image should be positioned in the "top left" of the div, the upper right in "top right" of the div, and so on. All these corner images should also be set to "no-repeat" since they only should appear once. Second, they all need to be set to a height of 12px. These two attributes are all that's needed for two of the corners, "cornerul" and "cornerll".

The two remaining div's both require three extra attributes to make them display correctly. The first attribute is a width of "12px"; without a width, the images display outside the box and consequently are not seen at all. The second attribute is to float them to the right because, well, they sit on the right side of the box. The third attribute for both of these right side div's is a negative top margin of "-12px". Why? Well div's by default are displayed as block elements. For the uninitiated, this means that they will appear on their own line and force all other content either above or below it. So to compensate we apply a negative margin equal to the height of the left side div's in order to bring them up to the same vertical location as those left side div's.

Those familiar with CSS may realize that another option to make the div's appear on one line would be to apply a "display:inline" property to all of the image div's. However, this would create other problems when we add borders so we just stick with using the "margin-top:-12px" attribute.

Fixing IE6 and Below

If you have been following this tutorial in IE6 or less and tried to open your code in the browser, you will notice that the corners do not line up correctly. However, this should not come as any surprise seeing as how it is a Microsoft product. (I do give Microsoft credit for fixing these problems in IE7 though.) So as usual, we have to waste time trying to make the box look correct for the users using anything less than IE7.

Fortunately, there are only two things we need to add to fix the corners.

.cornerll {
	margin-top:7px;
}
.controltop {
	padding-bottom:7px;
}

These attributes should NOT go into the same CSS file as the CSS from above. Instead it should go into a separate external file intended for IE6 and below. To those unfamiliar with this process, in the "head" tags of your HTML file, preferably just below the link to your original CSS file, you would place the code:

<!--[if lte IE 6]>
<link href="ie6style.css" type="text/css" rel="stylesheet" media="screen">
<![endif]-->

Anyway, back to the two attributes. First, we need to expand the bottom of the "controltop" div so that both of the top corner images will display in their full height. The second attribute moves the lower left corner image down to eliminate the padding that appears for some reason under the lower right image.

Congratulations! You now have a box that displays correctly in the major browsers. This box looks great in its own right and it is completely a personal preference as to whether you want to take the next step and add borders.

Adding Borders

It can be a little difficult to get the box to display correctly with borders, mainly because of IE6 and below. We'll start first with the standards compliant browsers. Here is what the box with borders will look like when we are done:

 

There are a few things that need to be done to add borders to our box. Here are the general steps:

• Add a border to the upper right and lower right corner images. Use an image editor such as Photoshop or The Gimp for this.
• To make the entire box liquid, change the width of the upper left and lower left images to a very wide width - 1400px minimum if this box is spanning most of the width of your page. The reason for the wide width is because these two images will contain the top and bottom border, respectively, so we need the borders to span the entire box.
• Add a top border to the upper image and a bottom border to the bottom image here to create the top and bottom borders for the box.
• Use CSS to add left and right borders to both "controlheader" as well as "controlcontent".
• Remove the background color from "controltop" and "controlbottom" to eliminate potential padding problems.

Here are the sample images - just right click and save them:

 

And here is the new CSS file with the changes in bold:

#examplebg {
	width:70%;
}
.controltop {
	/* No Background */ 	
	padding:0;
 	margin:0; 
} 
.controlheader {
 	background:#e89a3a;
 	padding:15px;
 	border-bottom:2px solid #000;
 	font-size:20px;
 	font-weight:bold;
        border-left:2px solid #000;
        border-right:2px solid #000; 
} 
.controlcontent {
 	margin:0;
        padding:7px 15px 7px 15px;
 	background-color:#e8e8e8;
        border-left:2px solid #000;
        border-right:2px solid #000; 
} 
.controlbottom {
 	/* No Background */
 	padding:0;
 	margin:0; 
} 
.cornerul {
 	background:url('ulcorner2.gif') top left no-repeat; 
	height:12px; 
}
.cornerur {
 	background:url('urcorner2.gif') top right no-repeat;
 	float:right;
 	height:12px;
 	width:12px;
 	margin-top:-12px; 
} 
.cornerll {
 	background:url('llcorner2.gif') bottom left no-repeat;
 	height:12px; 
} 
.cornerlr {
        background:url('lrcorner2.gif') bottom right no-repeat; 
	float:right;
 	height:12px;
 	width:12px;
 	margin-top:-12px; 
}

With these changes, our box will now include borders and look perfect in standards compliant browsers. Fixing it for IE6 and below is going to require some extra wasted code though:

.controlheader {
        margin-top:-4px;
}
.controlcontent {
        margin-bottom:-4px;
}
.controlbottom {
        margin-left:4px;
}
.cornerur {
        margin-top:-16px;
}
.cornerlr {
        margin-top:-16px;
}

This code is added to your IE6 stylesheet that we created earlier. Not too complicated is it? However, try taking the time to figure out what changes needed to be made to fix the box when there are no step-by-step instructions. Very annoying. With these changes however, our box with borders now displays perfectly in most of the major browsers. (I have no access to Safari to please let me know if anything doesn't display correctly).

Earlier I said that this box could have multiple background colors; by multiple I didn't mean just two. If you wanted to include additional background color bars in your box, all you would need to do is add a div with similar properties to "controlheader" and "controlcontent" and place it within those two div's. With this method you could add as many colored bars as you want in your box!

And so you have a liquid design box with rounded corners and optional borders. This is the best solution I could come up with for a box with these requirements and I think it works brilliantly with minimal hacks. I cannot take full credit for this though as some of the box ideas were drawn from another tutorial at Francky's Developers Corner.