It’s no secret that I like round corners! They are really very aesthetically pleasing, but they aren’t that easy to implement.  I have previously posted about the intricacies of utilizing the Stroke Options in Fireworks. Once one has a rounded rectangle they are happy with, the task moves to the HTML implementation.

What is the best way to display a rounded rectangle in markup?

In this web era, we’ve moved beyond tables to the almighty div. Tables still have their place in web design, and sometimes, they are needed to hack together a look that divs won’t consistently display across browsers, but the ideal is to only use divs. Limiting the solutions to only the div-centric ones still leaves us with several options to try. In designing my Urpi’s Dream blog, I had very specify requirements for the large rounded rectangle that would hold all of the blog’s content.

• The outline of the rectangle had to be painted to allow for the pseudo-3D look
• The round rectangle had to be able to expand and contract seamlessly to accommodate varying screens and content lengths
• The round rectangle had to maintain form no matter what was displayed inside it, including floated elements.

The below screen shot shows the intended result:

Liquid Round Corners

With the above requirements I set out to find the best solution for Urpi’s Dream. I tried many different tutorials out there, but only one came close to working properly for me, across most broswers, and that was the Liquid Round Corners solution over at Francky’s Developers Corner. This is an excellent solution, and the tutorial is very well laid out. It comes with serveral examples of using the solution in different ways.  The following diagram aims to give you a rough idea of how the Liquid Round Corners solution works.

It takes seven separate, nested divs to achieve the painted round corner div. Each of the corners are displayed using one div, and each of the side (left & right) get their own divs. There is then a seventh that holds the content. The actual implementation is more complicated than this diagram implies. I encourage you to go through the tutorial if you are hoping to create your own div with rounded corners. It includes all the HTML and CSS you will require.

One of my requirements tripped up the Liquid Round Corners solution, and that was the requirement for the div with the round corners to house floated elements. In Firefox, the solution has no problem with floated elements inside, but IE 7 sure did! In IE 7 the left side was being covered up by the inside div (#7 in diagram above). It didn’t look pretty at all! The problem was a resulting from a combination of having floated elements within the div with the round corners, and how IE 7 handles the clear CSS directive. The details of what was going on is hazy for me, but I figured out how to fix it.

The Liquid Corners solution uses padding on the innermost div to move the content away from the painted borders of the sides, primarily the left side. This made IE 7 complain. So I swapped it to use padding on the second most inner div (# 6 above) that paints the right border of the div with the rounded corners. In effect, I had to change:

to this:

Which works in IE 7 and Firefox. Sadly I could not get this solution to work with floated divs on IE 6. I succumbed and hacked it so that users of the antiquated browser would be shown just a plain old white rectangle, with no aesthetically pleasing round corners whatsoever. Sometimes you have to say enough is enough, move on to another problem, and hope that users upgrade their browser, or switch to Firefox!!!