CSS border-radius Property

The border-radius property shorthand sets all four border-*-radius properties. If values are given before and after the slash, then the values before the slash set the horizontal radius and the values after the slash set the vertical radius. If there is no slash, then the values set both radii equally. 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.

Formal syntax: [ <length> | <percentage> ]{1,4} [ / [ <length> | <percentage> ]{1,4} ]?

border-radius: 5px;
border-radius: 2%;
border-radius: 5px 10px;
border-radius: 5px 10px 4px;

• <length>Denotes the size of the circle radius or the semi-major and semi-minor axes of the ellipsis. It can be expressed in any unit allowed by the CSS <length> data types. Negative values are invalid.
• <percentage>Denotes the size of the circle radius, or the semi-major and semi-minor axes of the ellipsis, using percentage values. Percentages for the horizontal axe refer to the width of the box, percentages for the vertical axe refer to the height of the box. Negative values are invalid.

.class {
   border-radius: 2em, 1em, 4em, 3em; 
}

Click the button below to experiment with this property.

Give it a Try!

4+

9+

4+

5+

10.5+

• Share on Facebook
• Share on Twitter
• Share on Google+