How to Create Rounded Corners in Pure CSS

With the introduction of CSS 3 Web developers can now create rounded border corners in pure CSS.

Unfortunately, Internet Explorer 8 (earlier versions too) doesn't support CSS3, so this technique will not display rounded corners in that browser. Rounded corners work without problems in Firefox and Safari.

To create rounded border corners in Firefox configure your HTML element with the following parameters:

-moz-border-radius-topleft
-moz-border-radius-topright
-moz-border-radius-bottomleft
-moz-border-radius-bottomright

Rounded corners in Safari are configured using these statements:

-webkit-border-top-left-radius
-webkit-border-top-right-radius
-webkit-border-bottom-left-radius
-webkit-border-bottom-right-radius

Modify all corners in one go:

-moz-border-radius for Firefox

-webkit-border-radius for Safari

For example:

<div style="background-color: #bebebe; -moz-border-radius: 5px; -webkit-border-radius: 5px;border: 1px solid #000; padding: 15px;" >

will configure all corners to be rounded in both Firefox and Safari.