The good thing about CSS is that you can accomplish a job using several ways and methods. This article will tell you how to create CSS liquid round corners that can be a useful addition to your already rich arsenal of CSS skills. In this article will try to teach you how to create this and at the same time make it re-usable and most of all semantically correct liquid round corners.

For this project, we need these images:
• Left side image
• Top left image and top border combined
• Top right corner
• Right side image
• Bottom left corner and bottom border combined (including a bottom shadow)
• Bottom right corner with shadow
Every task has a beginning and in this case we need a main wrapper to do the trick. The main wrapper will hold all the content. This will also provide a sort of width for the box. You can do this by using the codes below:

HTML:
<div id=”liquid-round”></div>
CSS:
 #liquid-round {
width:70%;
margin:0px auto;
background:#fff url(http://www.search-this.com/rounded/leftside.gif) repeat-y left top;
}

The element is set to 70% width but can be whatever width you want or can be floated if your layout requires it. It is then centered with margin:0 auto (ignoring ie5.+ which will need text-align:center on a parent in order to center) and the left side image is attached to the background and repeated on the left y-axis to provide one of our full length sides.
Starting from the top we are going to need 2 elements onto which we can hang our left corner (with top border attached) and our right corner. This can easily be achieved by using a div with a nested span as follows

HTML:

<div class=”top”><span></span></div>
The div will hold the left corner (and top border) and the span will hold the right corner. We can target the span by its unique position so we don’t need a class there at all. If you wanted to be minimalist you could replace the span with <b></b> as it is a pretty neutral element these days (semantically speaking) but a span seems more logical to me. The css is quite simple and is as follows:

CSS:

.top {
width:100%;
height:20px;
background:url(http://www.search-this.com/rounded/top.gif) no-repeat left top;
}
.top span {
display:block;
position:relative;
height:20px;
background:url(http://www.search-this.com/rounded/top-right.gif) no-repeat right top;
}

The width of the element named top is 100% and this means it will fill the parents width completely, although strictly speaking it is not really necessary to specify the width as the static element will expand to fill its parents width anyway. However for clarity I have left it in place but it can be safely removed. The inner nested element is a span which is an inline element by default and therefore we need to turn its characteristics into behaving like a block level element.

Declaring the span as block level makes it display as a block level box and it now expands to fill the parents width in the way that any other normal block element would. The div and the span both have a specified height of 20px and this is needed so that the round corners have enough height to display and will also keep the content at enough distance so that it doesn’t overlap our corners.

You could reduce the height and allow the content to dictate all the height but you may find that the corners and borders get obscured by your content so its best to allow some lee-way. It’s also good to specify a dimension on both of these elements in order to avoid IE’s “haslayout” issues which will often come back to haunt you.
So we now have our wrapper and our top two corners and top border. The left side border is also in place due to our wrapper element which holds that image as a repeating background.

The content

next we create a content wrapper which will hold all the content but it will also provide the right repeating side border and some positional adjustments.

HTML:

<div class=”center-content”>
<!– CONTENT BEGIN –>

  <p>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</p>
  <p>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</p>
<!– CONTENT END –>
</div>

CSS:

.center-content {
position:relative;
background:url(http://www.search-this.com/rounded/rightside.gif) repeat-y right top;
padding:1px 20px 1px 25px;
margin:-1px 0 -50px 0;
}

The final blow

Our box is almost complete now and we have the top two corners and top border in place and both our side corners are taken care of with the main wrapper and the content wrapper. All that’s left to do is to repeat the same technique we used for the top corners and apply it to the bottom.

HTML:
<div class=”bottom”><span></span></div>

CSS:

 .bottom {
height:60px;
background:url(http://www.search-this.com/rounded/bottom.gif) no-repeat left bottom;
}
.bottom span {
display:block;
position:relative;
height:60px;
background:url(http://www.search-this.com/rounded/bottom-right.gif) no-repeat right top;
}

The code is virtually identical to the top section and needs little extra explanation and completes all the elements we need for the box. The two bottom corners are in place and also the bottom border which is attached to the left corner as already explained.
If you have floated content in this box then you may want to add clear:both to .bottom to ensure that the bottom section clears any floated content. You should now have a final structure that looks like this.

HTML:

<div id=”liquid-round”><div class=”top”><span></span></div><div class=”center-content”><!– CONTENT BEGIN –><!– CONTENT END –>
</div>
<div class=”bottom”><span></span></div>
</div>

Basically, this is it…your very own re-usable and semantically correct liquid round corners. If you’d like to see more of this go visit http://www.search-this.com/2007/02/12/css-liquid-round-corners/.

Tags: Liquid Round Corners for Your Page