CSS3 border-radius property

Add a fillet border to the div element:

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

Give it a try yourself

There are more instances at the bottom of the page.

Browser support

IE9 plus, Firefox 4 plus, Chrome, Safari 5 plus, and Opera support border-radius properties.

Definitions and usages

The border-radius property is a short-case property that sets four border--radius properties.

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

Grammar

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

Note: Set four values for each radii in this order. I f bottom-left is omitted, it is the same as top-right. I f bottom-right is omitted, it is the same as top-left. If top-right is omitted, it is the same as top-left.

Example 1

border-radius:2em;

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;

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 border