I seem to been obsessed with round corners, with all of the posts I have written on the topic (I had no idea!), so I thought I’d do some research into the future of round corners on these great inter-tubes and share my findings with you.

Currently the Mozilla based web browsers, Firefox being the most popular, supports the css directive -moz-border-radius, which effectively gives web elements round corners without using and nested divs or images. It really works quite beautifully, but it only exists in the Mozilla based browsers. IE, and others don’t know what to do with the directive, and just toss it out.

The Mozilla border-radius directive can be broken down to specify each corner to have it’s own roundness:

The CSS3 web standard has specified that browsers that meet the standards will implement this same functionality with the CSS3 directive border-radius. CSS3 is still a work in progress, and it will be an even longer wait for all of the browsers to catch up with the standards it sets. Us web developers do have some good things to look forward to though!

If you are interested in learning more about CSS3, Six Revisions has an awesome LIST of Useful Resources for CSS3.

Gotta love lists!

The effect of giving an images round corners is becoming increasingly popular lately, as the human eye really likes soft curves. The recent redesign of Facebook utilizes images with round corners very well, despite the backlash to the constant UI changes at the popular social network.

To give List Central a better aesthetic, I decided to also utilize round corners on the avatars to be displayed all over the site. Ia quite like the effect of mixing roundness with straight lines in a design. The effort put into implementing the small images with round corners was well worth it, and now, I can share my knowledge of how to do it with you:

Creating an image with round rectangles in your favourite image editor is fairly easy by using a round rectangle as a mask, but that solution lacks flexibility, and doesn’t suit List Central’s purposes at all! I can’t be sitting around setting up each and every List Central avatar with pretty round corners in Photoshop! In order to achieve the aesthetic effect, a combination of html an css has to be used.

. Avatar Image. .	. Round Corners Image. . . . .
. The Two Put Together. . . . . . . . .	. On White. . .

.
.
.

As you can see above, the avatar image that is used is completely intact. The round corner effect is achieved by layering another image on top of the avatar that has a transparent middle, and round corners of the same colour as the background. I opted for an round outline in my overlay image, which is completely optional.

The CSS classes “RoundCorners” and “RoundAvatarWrapper” is where the magic happens. Most importantly, the sizing and absolute positioning of the wrapping divs force the round corners image and the avatar image to appear in the same space. Then, specifying the z-index for each allows you to force the round corners image, with the transparent middle, to appear above the avatar image, give the appearance of an image with round corners.

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