CSS Border Radius: Syntax, Shorthand & Live Demo

For modern websites, use the standard border-radius CSS property to round corners. You normally do not need the old -moz-border-radius or -webkit-border-radius prefixes for current browsers. Support should be based on the browsers your project actually needs.

.card { border: 1px solid #cbd5e1; border-radius: 16px; }

Interactive CSS border-radius demo

Use the slider or presets to change the card’s corner radius. The CSS value updates live.

border-radius: 24px;

The demo above runs on this page. For an elliptical corner, CSS also supports values such as border-radius: 48px / 18px;. Use equal width and height with border-radius: 50%; to make a circle.

How the border-radius shorthand works

One value applies to all four corners. Two values alternate between opposite corners. Three values apply to top-left, top-right/bottom-left, then bottom-right. Four values are top-left, top-right, bottom-right, bottom-left:

.card--asymmetric { border-radius: 24px 8px 24px 8px; }

Elliptical and individual corners

Use a slash to separate horizontal and vertical radii:

.card--ellipse { border-radius: 48px / 18px; }

For selected corners, use longhand properties such as border-top-left-radius and border-top-right-radius.

Make an image circular

.avatar { width: 96px; aspect-ratio: 1; border-radius: 50%; object-fit: cover; }

Equal dimensions create a circle; object-fit: cover fills it without stretching the image.

Clip child content to rounded corners

The radius rounds an element’s own background and border. To clip a nested image, apply the radius and overflow: hidden to a wrapper:

.image-frame { overflow: hidden; border-radius: 16px; }
.image-frame img { display: block; width: 100%; height: auto; }

Avoid clipping controls that need an outside keyboard focus ring. Collapsed-border tables also have special behavior; apply the radius to a wrapper if needed.

Common questions

Is -moz-border-radius still needed?

For current browser targets, normally not. Write border-radius and check your supported browser list if you have a specific legacy requirement.

Does border-radius need a prefix?

Current browsers support the standard property without a prefix. See the MDN border-radius reference for syntax and browser support.

What does border-radius: 50% do?

It uses a percentage of the box dimensions. A square becomes circular; a rectangle becomes elliptical.

Can border-radius clip an image?

It rounds the styled element. For a separately nested image, clip it with a rounded wrapper that has overflow: hidden.

Download the CSS Border Radius Demo (ZIP)

Reference: MDN: CSS border-radius.