CSS3 border-radius Property


Add rounded borders to a <div> element:

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

Try it yourself »

Definition and Usage

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

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

Default value: 0
Inherited: no
Animatable: yes. Read about animatable Try it
Version: CSS3
JavaScript syntax: object.style.borderRadius="25px" Try it

Browser Support

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

Numbers followed by -webkit- or -moz- specify the first version that worked with a prefix.

border-radius  5.0
4.0 -webkit-
9.0 4.0
3.0 -moz-
3.1 -webkit-

CSS Syntax

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

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.

Property Values

Value Description Play it
length Defines the shape of the corners. Default value is 0 Play it »
% Defines the shape of the corners in % Play it »
initial Sets this property to its default value. Read about initial Play it »
inherit Inherits this property from its parent element. Read about inherit

Example 1


is equivalent to:


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;

Related Pages

CSS3 tutorial: CSS3 Borders

HTML DOM reference: borderRadius property


Color Picker