CSS3 border radius
Border-radius property
To add rounded borders to elements using CSS3 you need to use the border-radius property:
border-radius: 4px;
This property rounds the edges of the elements including its background. The element does not need to have a border defined to have a radius.
Browser specific border-radius
The following example illustrates the WebKit border radius property.
-webkit-border-radius: 4px;
Specifying different radii
You can define different radii for different edges on the element:
border-top-left-radius:8px;
border-top-right-radius:4px;
border-bottom-left-radius:4px;
border-bottom-right-radius:8px;
The example below shows the browser specific version.
-webkit-border-top-left-radius:8px;
-webkit-border-top-right-radius:4px;
-webkit-border-bottom-left-radius:4px;
-webkit-border-bottom-right-radius:8px;
The image below shows an example of using length different radii for elements: