Tutorial: Semantic Liquid Rounded Corners

I've decided that in addition to site reviews, I will provide tutorials on certain subjects as I see fit, considering tutorials are a great way to help a broad audience of people. Welcome to my first tutorial :)

In a discussion forum the other day, people were talking about how to create something called "liquid rounded corners," which basically means a box that looks like it has rounded corners but adjusts "liquidly" or freely with the size of both the content and the browser window size. Apparently, people were having problems with how to do this semantically using XHTML/CSS. There was discussion of using floats, positioning images, and much arguing and revelry. So, someone asked me to provide him with my version of the best solution that works in IE, FireFox, and Opera, and here it is.

My take on how to do this is to rather than create empty, pointless divs whose only current and future purpose is to provide a rounded corner is to create several wrapping divs. Name them something useful so that if you decide to change your design later, you don't have to worry about fixing all your divs from "upper-left-corner" to something like "blue-box-background" or whatever your change may be. In this example, I have four divs: wrap, inner-wrap, content-wrap, and content. The HTML looks like this (greeking added to fill out the box):

<div class="wrap">
<div class="inner-wrap">
<div class="content-wrap">
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse non odio. </p>
<p>Maecenas odio velit, posuere non, sagittis at, pharetra id, lorem. In euismod diam in elit tincidunt rutrum. Curabitur pharetra pede a risus. Praesent tempor nisl vitae nunc.</p>
</div>
</div>
</div>
</div>

As you can see, there is nothing special about the HTML, just a few nested divs. I wish I could indent the code for you, but it's a pain with Blogger. Moving on, the CSS is also very easy and straightforward. The images are images I have hosted here on this site, which you're more than welcome to use if you'd like. The CSS:

.wrap {
background: #D92326 url(http://photos1.blogger.com/blogger/ 5184/3100/320/ul.gif) no-repeat top left;
}

.inner-wrap {
background: transparent url(http://photos1.blogger.com/blogger/ 5184/3100/320/ur.gif) no-repeat top right;
}

.content-wrap {
background: transparent url(http://photos1.blogger.com/blogger/ 5184/3100/320/ll.gif) no-repeat bottom left;
}

.content {
background: transparent url(http://photos1.blogger.com/blogger/ 5184/3100/320/lr.gif) no-repeat bottom right;
padding: 10px;
}

Again, being able to indent would help a bit, but you get the idea. Notice how the only padding is in the inner-most div, "content". If you put padding (or margins) in any of the other divs, it will throw off the alignment of the corners. Also notice that instead of using pixels or percentages (which I could also have done), I used the terms "top left" or "bottom right" to position the background images. I do this because it helps me differentiate when I'm going back through the classes which one is which.

If you'd like, you can check this in IE, Firefox, and Opera and you'll see that it works the way it should in all of them. Listed below are the images I used. They aren't transparent on the outside, but all that takes is some photoshopping. If you're looking to add extra features, let me know and I will append them to this tutorial. I hope this helps!

Images:

• 
• 
• 
•