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; }
.emw3class { border-radius: 33%; }
#emw3id { 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 - MDN Web Docs.
border-radius.com - Online tool.
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.