CSS `border-radius`

Change the radius to see how the standard CSS property rounds a card. Current projects generally do not need -moz-border-radius.

CSS demo

Rounded corners

The card uses the standard border-radius property.

Try a value

Corner radius: 24px

border-radius: 24px;

This demo changes the standard, unprefixed property. Try keyboard focus and slider controls as well as clicking the presets.

For an elliptical shape, CSS also supports values such as border-radius: 48px / 18px;. A circle needs equal width and height with border-radius: 50%;.