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; }
.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.


Copyright © 2013-2022 Emw3.com
Some rights reserved