My two cents on rounded-corner markup

(2009-10-22: This is an old article, I would say deprecated, and you really shouldn’t be doing things this way, with the border-radius property being supported in various forms in most current browsers.)

(2006-04-18: The demo has been updated and expanded upon.)

I need rounded corners for a design I’m working on. A discussion of why I need them is pointless (I know they’re trendy, but in this case they can be considered defining visual elements ;-) ). However, an examination of how to implement them is quite interesting.

The problem

Rounded corners are simple, often (but not always) trivial elements of web design, born perhaps mostly out of the need for variation in content containers on web pages. In certain cases, they can complement an organization’s visual identity. In any case, rounded corners receive far too much attention. Why?

Because they should be simple to implement on web pages, but they’re not. And until CSS3 is supported across browsers (don’t hold your breath, it’ll be a while), designers must resort to hacks and workarounds.

I had specific requirements for my rounded corners:

• They should work in most browsers
• The browsers which don’t support them should display regular boxes
• They should require little or no extra (non-semantic) (X)HTML
• They should require minimal, elegant CSS
• They would ideally use one image for all four corners

Now, granted, this is ridiculous. This is way too much thought going into rounded corners, Doc. But hang in there, every solution starts with requirements.

Many great minds have worked on this problem. The Rounded Corners page at css-discuss shows the fruits of their labors. There are brilliant ideas here, and two of them come close to what I want:

• The minimal HTML-markup in Ryan Thrash’s Simple Rounded Corner CSS Boxes technique (based on Doug Bowman‘s Sliding Doors technique) is nice. Ryan has even managed to give the extra markup some meaning. However, I thought the CSS was somewhat lengthy.
• Ischa Gast’s Ronde Hoeken is great because of the use of only one image; the CSS is also very minimal. However, the HTML requires four nested

  elements. Ischa’s technique is based on the work of Roger Johannson and Maurice Svay.

I did consider using JavaScript; scripts such as Nifty Corners and Rico did cross my mind, but for my client, I’m hesitant to have a presentational element dependent upon CSS and JavaScript.

The solution

The result of playing around with the ideas of all these talented people: rounded corners, either fixed or flexible, with very little extra HTML, minimal CSS, and the use of only one image. And it works in every browser I’ve checked (be warned: I haven’t checked every version of every browser and haven’t had time to put together a compatibility chart). My client is happy, and why go through all that trouble without writing it up for my 3 subscribers? ;-)

Here’s the HTML:

   

      
This is a header
   
   

      
This is the body.
   

Looks familiar, because the markup is straight from Ryan Thrash. Here’s the CSS:

 
div.boxhead h2 { 
   background: url("rounded.png") top left no-repeat; 
} 

.boxhead { 
   background: url("rounded.png") top right no-repeat;
} 

.boxbody { 
   background: url("rounded.png") bottom right no-repeat;
} 

.rounded { 
   background: url("rounded.png") bottom left no-repeat;
   width: 30%; /* could be whatever you want, 
   as long as your image is large enough */ 
} 

If that’s not simple, I don’t know what is. rounded.png is a large transparent square with (in this case) white corners. How large you make it will depend on if it’s going to be a fixed or a flexible box, and how large the flexible box can grow. The image can also contain a complete border, as in Ischa’s technique.

Styling the boxes is easy. I would keep the decorative styles in separate classes, just to keep things simple. Let’s add some style:

.boxheaders { 
   padding: .4em 0 0 .6em;
   border-bottom: 1px dotted white;
}

.centered { margin: 0 auto; }

.boxtext { padding: 0 1em 1em 1em; }

.green { background-color: #a3bf91; }

and now we add these classes to the HTML, which then looks like this:

    

       
This is a header
    
    

        
This is the body.
    

This is the result.

This is so easy it’s scary, and I haven’t come across anything cleaner which meets the above requirements. Have fun with it; I sure had fun figuring this out. Thanks and credit to all the people who’ve spent plenty of hours thinking about this stuff, and whose principles and methods have been applied in this method.