CSS border-radius

The CSS border-radius property, is the short hand of the four border radius's: border-top-left-radius, border-top-right-radius, border-bottom-left-radius, and finally border-bottom-right-radius.

This property can be used to create rounded corners with pure CSS.

The property accepts a length value, which means you should use pixels, em, percentages – and so on.

Using CSS border-radius

The border-radius property takes two, or one set of values, but you can also do with just feeding it one value. If you only specify one value, the other values will simply be copied from the first.

The first set of values is used to set the horizontal radius, while the optional second set will define the vertical radius, allowing you to sort of "squeeze" the bend.

div {
border-radius: 15px 10px 15px 15px / 10px 15px 10px 15px;
}

Older versions of Firefox, may need the -moz- prefix for border-radius to work properly, Brugbart recommends that you remove this prefix once Firefox supports the real property, to avoid that your CSS becomes to bloated. See also: Ditch support for Old Browsers