CSS Border-Radius: Circles, Ellipses, and More

# CSS Border-Radius: Circles, Ellipses, and More

Rounded corners are the simplest way to make a design feel modern. Sharp corners look corporate and dated; rounded corners feel friendly and approachable.

The Syntax

border-radius: 10px;

That rounds all four corners equally. But border-radius is more powerful than it looks.

Four Corners, Individual Control

border-radius: 10px 20px 30px 40px;
/* top-left, top-right, bottom-right, bottom-left */

This lets you create organic, asymmetric shapes. A common card design uses larger top corners:

border-radius: 16px 16px 4px 4px;

Making a Perfect Circle

Set border-radius: 50% on a square element:

.avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
}

The element must be square (equal width and height) for a perfect circle. For an ellipse, use border-radius: 50% on a rectangle.

Elliptical Corners with Slash Syntax

border-radius: 50% / 25%;
/* horizontal radius / vertical radius */

This creates elliptical corners where the horizontal and vertical radii differ. It's useful for pill-shaped buttons:

.button {
  border-radius: 100px;
  /* or */
  border-radius: 50px / 50px;
}

Common Mistakes

1. Too much radius on large elements — border-radius: 50px on a full-width card looks weird. Stick to 8-16px for large surfaces.
2. Forgetting the element must be square for circles — border-radius: 50% on a 200x100 div makes an ellipse, not a circle.
3. Not accounting for border — If you have a 2px border, the radius needs to be slightly larger to look right.

Generating Border-Radius Visually

Our CSS Border Radius Generator lets you drag each corner individually and copy the CSS. Free, runs in your browser.

## Border Radius Syntax Explained

The border-radius property accepts 1 to 4 values:

border-radius: 10px;              /* all corners */
border-radius: 10px 20px;         /* top-left/bottom-right, top-right/bottom-left */
border-radius: 10px 20px 30px;    /* top-left, top-right, bottom-left, bottom-right */
border-radius: 10px 20px 30px 40px; /* top-left, top-right, bottom-right, bottom-left */

You can also specify horizontal and vertical radii separately using a slash:

border-radius: 50px / 25px; /* horizontal radius / vertical radius */

This creates elliptical corners instead of circular ones.

Common Border Radius Patterns

• Pill / capsule: border-radius: 9999px (or 999px) — Fully rounded ends. Used for buttons and tags.
• Circle: border-radius: 50% — Perfect circle when width equals height.
• Soft corners: border-radius: 8px — Subtle rounding, modern UI default.
• Card corners: border-radius: 12px — Common for cards and modals.
• Asymmetric: border-radius: 0 0 12px 12px — Rounded bottom only, useful for dropdowns.

Border Radius with Different Border Widths

When an element has a border, the border radius applies to both the outer edge of the border and the inner edge. If the border is thick, this can create an unexpected visual effect where the inner radius is much smaller than the outer radius.

/* Outer radius 20px, inner radius = 20px - 5px = 15px */
border: 5px solid black;
border-radius: 20px;

For precise control, use the border-radius shorthand with separate values for each corner, or use clip-path for non-rectangular shapes.