Help Web Designers

Border-radius: Create rounded corners with CSS

Border-radius property offers a clean and easy way of adding rounded corners to elements on the page. The rounded corner look can be applied to any or all four corners of an element, and even works with elements with a background image. Practically speaking border-radius is supported in FF3, Safari3, and Google Chrome, by way of vendor specific equivalent properties as they race to eventually just support border-radius. IE users (as of IE8) are out of luck at the moment unfortunately.

While the details of the official border-radius property are being worked out, the vendor equivalent properties for FF3.x, Safari 3.x, and Chrome that you can use right now are:

* -moz-border-radius: value
* -webkit-border-radius: value

Safari and Chrome both use the “-webkit-” version btw. For the time being, you should define both properties to cover your bases while browsers move to support the official version. “value” in this case can be a singular value (ie: 10px) that defines the radius of the border for all 4 corners, for example:

-moz-border-radius: 10px;
-webkit-border-radius: 10px;