A new feature of CSS3 is the ability to create rounded corners with border commands. This is one of my personal favourites, which whilst doing nothing for functionality - does contribute to the aesthetics of a rendered page.

The official style command is border-radius. Both Mozila/Firefox and Safari 3 have had the foresight to implement this feature set, which allows you to create round corners on boxes, which means I can demonstrate the coding now without waiting for the official launch of CSS3. Please don't write to complain that you cannot see this effect in Internet explorer as IE has yet to implement the function.

Here is an example:

The code for this example above is actually quite simple:

<div style="border: 2px solid #ea791e; padding: 20px; -moz-border-radius: 15px; -webkit-border-radius: 15px; background-color: #fccfaa">

Note that the corner commands are duplicated in the example above as Mozilla has a unique take on the command, see right:

The four corners can also be rendered individually to create some impressive, though simple, styling.

Please note the Mozilla version has no hyphen between specific corner locations (topleft) and the Webkit commands require a hyphen (top-left). Thanks go to Andrew for pointing this out, as I had committed the grievous typo error myself...

Commands for mozilla/ Official CSS3 commands

• -moz-border-radius-topleft / -webkit-border-top-left-radius
• -moz-border-radius-topright / -webkit-border-top-right-radius
• -moz-border-radius-bottomleft / -webkit-border-bottom-left-radius
• -moz-border-radius-bottomright / -webkit-border-bottom-right-radius

I hope you will have fun with this new feature set, so much cleaner and simpler than the cumbersome methods of the past :0)

I will be adding some CSS driven menu tutorials making use of these features in future articles, so please check back for updates.