Rounded Corners


By: Paul Hirsch

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/

Edit:

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



**********

Paul Hirsch is one of the site administrators for IWDN and a partner/owner of Equentity, LLC.

Republished with written permission from the author, Paul Hirsch [http://www.iwdn.net/showthread.php?t=2874]