Border-Radius

Shorthand to set all four border-*-radius properties.

      border-Radius: top-left [top-right] [bottom-right] [bottom-left] ;

border-radius is a shorthand property for setting the following properties

border-top-left-radius - Curve the top-left corner
border-top-right-radius - Curve the top-right corner
border-bottom-left-radius - Curve the bottom-left corner
border-bottom-right-radius - Curve the bottom-right corner

The four values are given in the clockwise order: Top-Left, Top-Right, Bottom-Right, Bottom-Left.
If Bottom-Left is omitted it will default to the same as Top-Right.
If Bottom-Right is omitted it will default to the same as Top-Left.
If Top-Right is omitted it will default to the same as Top-Left i.e all 4 radiuses will be set to the same value.

Percentage values will curve the height and width of the corner in proportion to the height and width of the element.

Default: 0 (Square corners)

The border-style property must be set for the border-radius properties to have any effect.

Examples:
h1 { border-radius: 40px 10px; }
.ss64class { border-radius: 33%; }

#SS64id { border-radius: 0.5em; }

Try it:

This is a sample of text with a CSS border.

Browser Support: (CSS 3) IE 9 and up, and all other modern browsers.

“And I thought how unpleasant it is to be locked out; and I thought how it is worse, perhaps, to be locked in” ~Virginia Woolf”

Related:

border-radius.com - Online tool
CSS3 generator - Generate rounded corners and box-shadow
border-top-left-radius - Curve the top-left corner
border-top-right-radius - Curve the top-right corner
border-bottom-left-radius - Curve the bottom-left corner
border-bottom-right-radius - Curve the bottom-right corner
box-shadow - Attach one or more drop-shadows to the box.


© Copyright SS64.com 1999-2014
Some rights reserved