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: