Create Rounded Corners with CSS3 Border-Radius Property

One of the CSS3 properties designers have been longing the most for is undoubtedly the border-radius property. With CSS3 border-radius property it’s possible to create the so popular rectangles with rounded corners exclusively via CSS – no images needed.

CSS3 aren’t supported by all browsers yet. The border-radius property is supported by Firefox (since version 3.0), Safari (since version 3.1) and Chrome (since the first version), but it’s not supported by Internet Explorer or Opera (it should be implemented in Opera 10).

Although Firefox, Safari and Chrome support this property, they do so in slightly different modalities. For the sake of simplicity, BloggingCSS shows you how it is supported by Firefox and then explain the differences in Safari and Chrome.

Requirements: Firefox 3.0+, Safari 3.1+, Chrome 1.0+
Demo: http://www.bloggingcss.com/en/tutorials/the-css3-border…
License: License Free