Border-radius

The   property is used in CSS and some special HTML tags to create a rounded border of a particular object. This property's effect can only be seen in browsers which do not use WebKit as their web engine, like Internet Explorer. As of IE9 and Firefox 4, the  property is supported. It will only create a border if there is a specific /  on the object. Outlines and/or borders applied to the object will also be affected by the border radius. This property is a shorthand property for setting the individual properties of the,  ,  , and   properties. For functionality on other browsers, use the  or   properties.

Values
Accepts one, two, three or four values, can optionally be followed by a slash (/) and a second set of values. Slashes are only supported in Gecko 2.0 (Firefox 4.0).

One value specifies the radius for all four borders. Two values specify the radius for the top left and top right, respectively, borders. Four value specify the radius of the top left, top right, bottom right, and bottom left borders, in that order.

HTML example:

That will make this: Check the radius.

CSS example:

Image example: