Top Resources

If you enjoy using our website, please consider making a donation. To donate through PayPal click the link below and then simply select how much you'd like to donate!

CSS Liquid Round Corners

There are many techniques available to give your square boxes that nice rounded look but I thought I'd concentrate this article on the basic techniques used to create this box:

this is some text this is some text this is some text this is some text this is some text this is some text this is some text this is some text this is some text this is some text this is some text this is some text this is some text this is some text this is some text

We won't be doing anything new or clever - just basic construction techniques that will produce a re-usable round box that you can then optimize and re-develop at your leisure. The first thing you need to know is that until css3 is fully supported then the only realistic way to do this at present is to use images.

When you're done with this article you will have a re-usable, cross-browser supported, semantically correct, liquid round box! Sound like fun? Let's begin!

Here are the images needed for this example:

	Left side image		Right side image
	Top left image and top border combined		Bottom left corner and bottom border combined (including a bottom shadow)
	Top right corner		Bottom right corner with shadow

As you can see there are six images needed rather than eight (4 corners + 4 sides = eight images) because the top and bottom borders have been included on the top and bottom left corners as a combined image. This saves two images and 2 extra elements on which to hang them. However the downside is that the horizontal top border image must cater for all monitor widths and therefore the image is quite wide to cater for this fact. This isn't as bad as it may sound and the image file size is still relatively small and what we lose on file size we can gain by making the browser not work so hard in redrawing the page as would happen with 1px x 1px repeated images.

We could, of course, have applied the same logic to our side corners and also included the side borders on two of the round corners as well. This would have reduced our total down to 4 images and is something you may want to experiment with yourself. Bear in mind though that the height of a web page is almost unlimited and you may run out of border if you use that method. Therefore for this demonstration we are using repeating images for the sides so that the box can extend forever.

Put the following CSS in your stylesheet.

CSS:

#liquid-round {
width:70%;
margin:0px auto;
background:#fff url(/webimages/leftside.gif) repeat-y left top; /*change /webimages/leftside.gif to where your images are stored*/
}
#liquid-round .top {
width:100%;
height:20px;
background:url(/webimages/top.gif) no-repeat left top;
}
#liquid-round .top span {
display:block;
position:relative;
height:20px;
background:url(/webimages/top-right.gif) no-repeat right top;
}
#liquid-round .center-content {
position:relative;
background:url(/webimages/rightside.gif) repeat-y right top;
padding:1px 20px 1px 25px;
margin:-1px 0 -50px 0;
}
#liquid-round .bottom {
width:100%;
height:60px;
background:url(/webimages/bottom.gif) no-repeat left bottom;
}
#liquid-round .bottom span {
display:block;
position:relative;
height:60px;
background:url(/webimages/bottom-right.gif) no-repeat right top;
}

Put this HTML where you want the box to appear.

HTML:

There are many other methods about for creating round boxes but in effect they all do the same thing and that is they find elements on to which they can hang their images. If you google "rounded corners" you will find many other examples to play with now that you understand the concept.

This article is a modified version of Search This.

Other Resources: