CSS border-radius attribute

Definition and Usage

The border-radius property is a shorthand property used to set the four border-*-radius properties.

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

See also:

CSS3 Tutorial:CSS3 Borders

Example

Add rounded borders to the div element:

div
{
border:2px solid;
border-radius:25px;
}

Try It Yourself

More examples are at the bottom of the page.

CSS Syntax

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

Note:Set each of the four values of each radii in this order. 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.

Property Value

Value Description Test
length Define the shape of the corner. Test
% Define the shape of the corner in percentages. Test

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;

Technical Details

Default Value: 0
Inheritance: no
Version: CSS3
JavaScript Syntax: object.style.borderRadius="5px"

Browser Support

The numbers in the table indicate the first browser version that fully supports this property.

Chrome IE / Edge Firefox Safari Opera
5.0
4.0 -webkit-		 9.0 4.0
3.0 -moz-		 5.0
3.1 -webkit-		 10.5