CSS border-radius Guide: Rounded Corners & Asymmetric Shapes

Shorthand Syntax

The shorthand follows the same clockwise pattern as padding/margin, starting from the top-left:

border-radius: 16px;                /* all four corners */
border-radius: 16px 8px;            /* top-left+bottom-right, top-right+bottom-left */
border-radius: 16px 8px 4px;        /* top-left, top-right+bottom-left, bottom-right */
border-radius: 16px 8px 4px 2px;    /* top-left, top-right, bottom-right, bottom-left */

The 8-Value (Elliptical) Syntax

Each corner actually accepts two values — a horizontal radius and a vertical radius — separated by a slash. This creates elliptical corners instead of circular ones:

/* Pattern: horizontal-radii / vertical-radii */
border-radius: 50px 20px 30px 40px / 10px 20px 30px 40px;

/* Shorthand: same for all corners */
border-radius: 50% / 25%;

/* Per-corner full control */
border-top-left-radius:     30px 60px;
border-top-right-radius:    60px 30px;
border-bottom-right-radius: 30px 60px;
border-bottom-left-radius:  60px 30px;

The first value of each corner pair is the horizontal radius (how far in from the side the curve starts). The second is the vertical radius (how far down from the top the curve starts). Equal values make circular arcs; unequal values create stretched elliptical arcs.

Common Shapes

Circle

.circle {
  width: 100px;
  height: 100px;
  border-radius: 50%;
}

Pill Button

.pill {
  padding: 0.5rem 1.25rem;
  border-radius: 9999px; /* always larger than half the height */
}

Use a huge pixel value (like 9999px) for pills — the browser clamps to half the element's height, giving perfect semicircular ends no matter the size.

Leaf / Teardrop

.leaf {
  width: 120px;
  height: 120px;
  border-radius: 0 100% 0 100%;
}

.teardrop {
  width: 100px;
  height: 100px;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
}

Blob (Asymmetric Rounded Shape)

.blob {
  width: 200px;
  height: 200px;
  background: #7c5cfc;
  border-radius: 63% 37% 54% 46% / 55% 48% 52% 45%;
}

Organic blobs are the 8-value syntax's superpower. Each corner gets unique horizontal/vertical radii, creating irregular-looking but mathematically precise shapes perfect for decorative backgrounds.

Squircle (Apple-Style Rounded Square)

/* Approximation — true squircles require SVG or mask */
.squircle {
  width: 120px;
  height: 120px;
  border-radius: 30%;
}

Note: border-radius produces a true ellipse, not a squircle (a mathematical shape with continuous curvature). Apple's real squircle requires SVG or CSS mask-image with a custom shape. For most UI, a 20-30% border-radius is visually indistinguishable.

Pixel vs Percentage

Overflow Considerations

By default, a rounded-corner element doesn't clip its children. An image inside a rounded card will still have square corners unless you add:

.card {
  border-radius: 16px;
  overflow: hidden;  /* clip children to the rounded shape */
}

Note: overflow: hidden breaks outside-element effects like box-shadow glows that extend past the container. If you need both, apply border-radius to the child image directly instead.

Per-Corner Control for Asymmetric Designs

/* Tab-like shape (only top corners rounded) */
.tab {
  border-radius: 12px 12px 0 0;
}

/* Notification banner (left corners squared) */
.banner {
  border-radius: 0 12px 12px 0;
}

/* Speech bubble corner */
.bubble-left {
  border-radius: 16px 16px 16px 0;
}

/* Capsule on one side only */
.half-pill {
  border-radius: 9999px 0 0 9999px;
}

Frequently Asked Questions

Why doesn't a big border-radius make a bigger circle?

Once the radius exceeds half the smaller dimension, browsers clamp it. A 50px radius on a 40×40 element behaves the same as 20px (which is half of 40). Use percentages for shapes that scale with size, or use 9999px as a foolproof "fully rounded" value.

Does border-radius affect performance?

Barely. Modern browsers render rounded corners as fast as square ones. The only time it matters is when combined with overflow: hidden on large scrolling elements, which can force off-screen rendering. For normal UI elements, there's no measurable cost.

How do I animate border-radius smoothly?

Use transition: border-radius 0.3s ease; — browsers interpolate radii smoothly. For morphing between very different shapes (e.g., circle to squircle), add will-change: border-radius to hint the renderer.

Can I make a triangle or star with border-radius?

No — border-radius rounds corners of rectangles. For triangles use the border trick or clip-path. For stars and other polygons, use clip-path or SVG. See our CSS Triangle Tutorial for details.

What's the difference between border-radius and -webkit-border-radius?

The -webkit- prefix was needed for older Safari/Chrome versions (pre-2013). Today the unprefixed version works everywhere — drop the prefix unless supporting ancient browsers.