CSS 3 Border Radius Explained.

Border radius is the new property in CSS3.

How Border radius property works.

Imagine an eclipse (circle if vertical radius = horizontal radius ) is positioned at the corner of the rectangle whose center is at a distance equal to vertical radius from top/bottom edge and horizontal radius from left/right edge.
the quarter part of the eclipse at the corner of the square traces smooth curve to the rectangle corner. 

 

So the CSS property: border-radius: vertical radius/horizontal radius;

It sets the border radius for all four corners of the rectangle as described above 

the first value of this property is the horizontal radius and second one is vertical radius.

Example

  width: 20px;
height: 30px;
border: 1px solid black;
border-radius: 20px/30px;

Result

To know more visit http://www.w3.org/TR/css3-background/