[the_pm]

This brief exercise shows how you can create a box with rounded corners that allows text to flow into the space that the corners occupy.

There are many different ways to create the rounded corner effect. Here are two common ones:

1. Create a table with nine cells. Place corners in the outermost cells and content in the middle. There are many reasons why this is a poor method, but I'll leave that discussion for another day.

2. Stack three <div>s on top of each other. The first <div> contains the top two corners (one of them is inside a nested div). The last <div> is the same. The <div> sandwiched between the two is where the content lives. This method it ok, but you are prevented from having text flow through all three containers.

My solution calls for repeatedly nesting <div>s and padding the content within. It's not a particularly novel approach, but it's one that's surprisingly efficient in terms of markup.

Despite the efficiency, the nesting is ugly - very, very ugly. In my opinion, the inability to declare multiple backgrounds for one object in CSS is a major shortcoming of the technology. It forces the notion of "one container for every unit of information" out the window, just to be able to apply the desired style.

So, I present to you my rendition of a four cornered box. I don't like how I had to create this, but I believe it's one of the better methods available to developers at this time.

http://www.iwdn.net/articles/corners1/

[Martin]

*cough*...Safari 1.3...*cough*

ahh if only the rest of the world supported this (though Konqueror now does...woo!)

[the_pm]

So it is part of the CSS3 spec! You know, I should have known that. I've rooted through a good portion of that spec, but I never encountered multiple backgrounds. It would be a Godsend if browser companies would beat W3C to the punch and support this unilaterally before the spec is even released. That would put a little pressure on them to keep it in the final release candidate

[Martin]

The funny part is, Safari 1.3 supported multiple background-images on an element for months before Dave Hyatt finally admitted it in public on the Safari weblog. No-one thought to give it a whirl, I mean, why would you?

[the_pm]

I just now emailed Opera about implementing this as well. I would love to see the world's best browser jump on this as soon as possible!

I suppose it wouldn't hurt to hit up the Firefox team as well too...

You know, it hardly matters. It'll be another few years after Microsoft releases IE7 that they even consider supporting it, and even then you have to wait years before you can rely on older version browsers to be mostly phased out.

[the_pm]

http://pro.html.it/esempio/nifty/nifty1.html - This is a method for achieving smaller-radius corners without using images or proprietary rounding CSS techniques. I disagree with their use of the <b> tag to implement it, but I understand this was probably done to make the markup efficient. Substitute the appropriate generic container in its place, and you have a nice tutorial here!

Thanks to George in TX (goes by George on IWDN) for posting this.
http://www.newbies.ws/viewtopic.php?p=7762 - Original thread on Computer Newbies Help