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!!!

Here’s a quick tip for those of you out there using FireWorks to do your designs.

All over the web you can find beautifully drawn round rectangles, some are elaborate while others are fine with a one pixel width. In my designing I wanted some of these beautiful design elements integrated into my sites, but I was baffled as to how to make those corners look right. Every round corner I drew had jagged and pixelated corners. I was completely clueless as to what was going on.

Basic - Hard line

I was concerned I might have to tackle one of the hardcore design programs like Illustrator just to get a nice looking rectangle with smooth round corners. Then I figured out that you have to switch the Stoke Options. Now that I know this, it’s really quite obvious. 20/20 hindsight is always grand.

Basic - Soft Line

Changing the stroke option to Soft Line under the Basic category is a major improvement, but I ended up choosing the Pencil 1-Pixel Soft option for my one pixel rounded rectangles, as I think it is a little smoother.

Pencil 1 Pixel Soft

UPDATE: Synjari offered a great tip in the comments section! Using the parameters she suggested for the Photoshop LiveEffects in Fireworks CS3 I was able to create an even nicer looking rounded rectangle:

Photoshop Live Effects in Fireworks CS3