CSS3 border-radius Property

Example

Add rounded borders to a div element:

div
{
border:2px solid;
-moz-border-radius:25px; /* Firefox */
border-radius:25px;
}

Try it yourself »

Browser Support

Internet Explorer Firefox Opera Google Chrome Safari

The border-radius property is supported in Opera, Chrome, and Safari.

Firefox supports an alternative, the -moz-border-radius property.


Definition and Usage

The border-radius property is a shorthand property for setting the four border-*-radius properties.

Tip: This property allow you to add rounded borders to elements!

Default value: 0
Inherited: no
Version: CSS3
JavaScript syntax: object.style.borderRadius="5px"


Syntax

border-radius: 1-4 lengths|% / 1-4 lengths|%;

Note: The four values for each radii are given in the order top-left, top-right, bottom-right, bottom-left. If bottom-left is omitted it is the same as top-right. If bottom-right is omitted it is the same as top-left. If top-right is omitted it is the same as top-left.

Value Description
length Defines the shape of the corners
% Defines the shape of the corners in %

Example 1

border-radius:2em;

is equivalent to:

border-top-left-radius:2em;
border-top-right-radius:2em;
border-bottom-right-radius:2em;
border-bottom-left-radius:2em;

Example 2

border-radius: 2em 1em 4em / 0.5em 3em;

is equivalent to:

border-top-left-radius: 2em 0.5em;
border-top-right-radius: 1em 3em;
border-bottom-right-radius: 4em 0.5em;
border-bottom-left-radius: 1em 3em;