CSS3 border-radiusProperty

Example (example.com)

Example

Add rounded borders to two div elements:

#example1 { border: 2px solid red; border-radius: 25px; } #example2 { border: 2px solid red; border-radius: 50px 20px; }

Try it Yourself »

Browser Support

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

The number immediately preceding -webkit-, -ms-, or -moz- is the first browser version number that supports the prefixed property.

Property
border-radius 4.0 -webkit- 9.0 4.0 -moz- 5.0 -webkit- 10.5 -o-

Attribute Definition and Usage Instructions

border-radius allows you to set rounded corners for an element's outer border. When one radius is used, a circle is determined; when two radii are used, an ellipse is determined. The intersection of this ellipse with the border creates the rounded corner effect.

The border-radius property is one that can specify up to fourborder-*-radiusCompound properties of attributes

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

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

Syntax

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

Note:The order of the four values for each radius is: 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 curve.
% Use % to define the shape of the corner.
border-radius: 1em/5em;

/* Equivalent to: */

border-top-left-radius:     1em 5em;
border-top-right-radius:    1em 5em;
border-bottom-right-radius: 1em 5em;
border-bottom-left-radius:  1em 5em;
border-radius: 4px 3px 6px / 2px 4px;

/* Equivalent to: */

border-top-left-radius:     4px 2px;
border-top-right-radius:    3px 4px;
border-bottom-right-radius: 6px 2px;
border-bottom-left-radius:  3px 4px;

Elliptical border border-radius: 15px 50px 30px 5px: The first value applies to the top-left corner, the second value to the top-right corner, the third value to the bottom-right corner, and the fourth value to the bottom-left corner:


Elliptical border border-radius: 15px 50px 30px: The first value applies to the top-left corner, the second value to the top-right and bottom-left corners, and the third value to the bottom-right corner:


Elliptical border border-radius: 15px 50px: The first value applies to the top-left and bottom-right corners, and the second value to the top-right and bottom-left corners


Elliptical border border-radius: 15px: The value applies to all four corners, with equal rounded corners.



Try it Yourself »

More Examples

Example

Background image with border

#rcorners3 { border-radius: 25px; background: url(paper.gif); background-position: left top; background-repeat: repeat; padding: 20px; width: 200px; height: 150px; }

Try it Yourself »

Example

Different types of parameters

#rcorners7 { border-radius: 50px/15px; background: #8AC007; padding: 20px; width: 200px; height: 150px; } #rcorners8 { border-radius: 15px/50px; background: #8AC007; padding: 20px; width: 200px; height: 150px; } #rcorners9 { border-radius: 50%; background: #8AC007; padding: 20px; width: 200px; height: 150px; }

Try it Yourself »

Example

Different numbers of parameters

#rcorners4 { border-radius: 15px 50px 30px 5px; padding: 20px; width: 200px; height: 150px; } #rcorners5 { border-radius: 15px 50px 30px; padding: 20px; width: 200px; height: 150px; } #rcorners6 { border-radius: 15px 50px; padding: 20px; width: 200px; height: 150px; } #rcorners7 { border-radius: 15px; padding: 20px; width: 200px; height: 150px; }

Try it Yourself »

Example

Shorthand format:

#example1 { border-radius: 2em / 5em; } /*Equivalent to: border-top-left-radius: 2em 5em; border-top-right-radius: 2em 5em; border-bottom-right-radius: 2em 5em; border-bottom-left-radius: 2em 5em;*/ #example2 { border-radius: 2em 1em 4em / 0.5em 3em; } /*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;*/

Try it Yourself »

Related Articles

CSS3 Tutorial:CSS3 Border

other extensions