Rounded Corners Using CSS

---

Implementing Rounded Corners Using CSS

Introduction

Ever wonder how to create those spiffy rounded corners around HTML tables or borders without having to make images for corners? Well, actually the W3C has considered this need in their CSS3 Backgrounds and Borders Module. Although the official W3C status of the border-radius property is still in "Working Draft" we should see more widespread adoption in the near future.

Browser Adoption

Currently, the property is not supported by IE or Opera, however Mozilla based browsers are actually using the -moz-border-radius property as an experimental version of the property. To create a rounded corner in Mozilla see Example1:

Example1:

.rounded1 {
   -moz-border-radius: 10px;
   border-radius: 10px;
   border: 1px solid gray; 
   width: 200px;
   padding: 10px;
}
<div class='rounded1' >
Example of Rounded Corners using CSS3 in Mozilla
<div>

Benefits

For HTML optimization purposes, this is one of the methods that will have pretty dramatic results, especially for pages having a high number of rounded corners. The main benefit of using CSS over images is the reduction in overall page size, code size, and the number of server requests.

Drawbacks

You may need to implement your design twice (once this way, and ocne for browsers not-supporting this property).

Recommendation

It is recommended that you use the border-radius property in addition to the -moz-border-radius property for forward compatibility reasons.




Daniel Volkovich
CTO, GigaVoice