The border-radius property of css 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.

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

"-webkit-" version is used by both Safari and Chrome,we should define both properties to cover the 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.example:
-moz-border-radius: 10px;
-webkit-border-radius: 10px;

We can also specify Individual border radius properties,like
* -moz-border-radius-topleft
* -moz-border-radius-topright
* -moz-border-radius-bottomright
* -moz-border-radius-bottomleft



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

In Firefox, the -moz-border-radius property act as a shorthand property to all 4 individual border radius properties. Simply enter 4 separate values to affect each of the 4 corners. Safari unfortunately does not yet support such a shorthand.
Example: -moz-border-radius: 9px 3px 9px 3px;
-webkit-border-top-left-radius:9px
-webkit-border-top-right-radius:3px
-webkit-border-bottom-right-radius:9px
-webkit-border-bottom-left-radius:3px