The border-radius CSS property allows Web authors to define how rounded border corners are. The curve of each corner is defined using one or two radii, defining its shape: circle or ellipse.

Images of CSS3 rounded corners: no rounding, rounding w/ an arc of circle, rounding w/ an arc of ellipse

The radius applies to the whole background, even if the element has no border; the exact position of the clipping is defined by the background-clip property.

This property is a shorthand to set the four properties border-top-left-radius, border-top-right-radius, border-bottom-right-radius and border-bottom-left-radius.

[Webplatform](docs.webplatform.org/wiki/css/properties/border-radius "Webplatform")
[Mozilla docs](https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius "Mozilla")
[Caniuse](http://caniuse.com/#feat=border-radius "Caniuse")