CSS 3: Rounding the Corner (by Chris Brewer)

CSS 3: Rounding the Corner

Published on 10/26/2009, 7:50 AM Last Update: 3 month(s) ago by Chris Brewer

Simple things on the web are rarely simple. For example, take rounded corners. Ever wonder why the web is so square? Like the ASCII screens of the past, HTML/CSS just doesn't provide a simple way to do anything other than squared corners.

Adding rounded corners takes us to an entirely different realm, where simplicity is out the window and complexity forces us to our knees at the alter of Hacks In Support of Design Ideals. I'll identify two typical methods for doing so, and then illustrate how CSS 3 saves us ton of heartache — until you consider Microsoft Internet Exploder.

Take, for example, the typical box on a page:

Code	Output
`<div style="border:1px solid green;height:120px;width:120px;text-align:center;"> A simple 120 square pixel box with a one pixel border. </div>`

That's pretty straight-forward code. Now, let's look at two common methods for adding rounded corners to the mix (yes, grasshopper, there are many more methods than I'm willing to show here — but they're all similarly convoluted).

The Seventh Circle of Script

The first method is to use javascript to parse the DOM looking for specific elements, which are then changed dynamically. For browsers without javascript enabled, the standard square corners will be displayed.

Code Output

For each new DIV, you simply create a new ID in HTML and used the Rounded( ) function in Javascript.

Cult of the Nested DIV

The next method is just as hairy and inaccessible to the casual HTML coder. It involves Photoshopping the four individual rounded corners, then using them as backgrounds of nested DIVs. Oy!

Code Output

<div id="leftNavTop"> <div id="leftNavTop_left_edge"> <div id="leftNavTop_right_edge"> <div id="leftNavTop_top_edge"> <div id="leftNavTop_top_right"> <div id="leftNavTop_top_left"> <div id="leftNavTop_bottom_edge"> <div id="leftNavTop_bottom_right"> <div id="leftNavTop_bottom_left"> <div id="leftNavTop_inner"> Nested DIV corners </div> </div> </div> </div> </div> </div> </div> </div> </div> </div>

Every time you want to create a new box with rounded corners, you have to repeat the above code in its entirety.

Salvation is Iterative

The soon-to-be-standardized CSS 3 provides a simple mechanism for creating rounded corners on a wide variety of elements. It will even round the corners of images! While CSS 3 is not yet ratified, both Mozilla (AKA Firefox) and WebKit (AKA Safari and Chrome) have responded to the huddled masses of developers desperate for relief. What they've done is added support for several great CSS 3 features in their most recent browsers (Firefox 3.5, Safari 4 and Google Chrome).

Here is the exceptionally simple CSS 3 method for creating a DIV with rounded corners:

Code	Output
`<div style="border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; border:1px solid green;height:120px;width:120px;text-align:center;"> Simple CSS 3 rounded corners! </div>`
When CSS 3 is finally ratified, you'll need only use the border-radius declaration (and the -webkit and -moz versions will be deprecated).

Nifty, eh? Even better is that you can set the border radius on all four corners independent of each other, in order to create some interesting shapes.

This method degrades on non-CSS3 browsers to show a square box without rounded corners.