Using Rounded Corners with CSS3
A few years back, rounded corners became one of the signature design elements of the Web 2.0 trend. Even though they started as a fad, rounded corners are more than simple eye candy. They also have a role in separating or grouping the sections of a page.
As CSS3 gets closer to becoming the new standard for mainstream design, the days of rounded corners through elaborate background images is fading. This means less headache and time spent working out alternatives for each browser.
Browser Specific Options
Through the use of proprietary CSS properties, certain browsers can already display rounded corners. For example, Firefox uses the -moz-border-radius property to control the corner radius of a page’s border. Safari can accomplish the same result with the -webkit-border-radius or -khtml-border-radius properties.
To give a 5 pixel border radius, the proprietary CSS property would look like:
-moz-border-radius: 5px; -khtml-border-radius: 5px; -webkit-border-radius: 5px;
Since proprietary CSS properties do not affect every web engine, you’ll need to include one for each browser family supported.
Cross Browser Considerations
Until more browsers begin to support CSS3, these options are a good way to increasing backwards compatibility with pure CSS. If you’re wondering how specific browsers handle the specification, this table has the results organized nicely.
Border Radius in Action
Let’s go through a quick example in border-radius usage. Since CSS3 has not yet been finalized, we’ll be including the proprietary options mentioned above too.
To keep things simple, we’ll make the targets of our experiment basic div elements. You can see the results of both together on the demo page.
Four Corners
This style will results in a box with four equally rounded corners.
.content-box{border:1px solid #AFAFAF; border-radius:5px; -moz-border-radius: 5px; -webkit-border-radius:5px; -khtml-border-radius:5px;}
Two Corners
This style will result in a box with only the top two corners rounded
.specific-box{border:1px solid #000; border-radius:5px 5px 0px 0px; -moz-border-radius: 5px 5px 0px 0px; -khtml-border-radius: 5px 5px 0px 0px; -webkit-border-radius: 5px 5px 0px 0px;}
Keep in mind that even though border-radius is not yet supported by all browsers, it doesn’t hurt to include it anyways. This will help ensure that you have forward compatibility. Browsers with CSS3 support will use the property, while the rest will just ignore it.
