CSS Border Radius: The Complete Visual Guide

Most developers use border-radius for one thing: rounding corners on cards and buttons. But the property is considerably more powerful than that — it controls up to eight individual values, supports elliptical curves, percentages, and can produce shapes that look nothing like a rectangle with rounded corners. The DevToolShack Border Radius Generator lets you dial in any combination visually and copy the CSS instantly.

The Basic Syntax

/* All four corners the same */
border-radius: 8px;

/* Top-left/bottom-right  Top-right/bottom-left */
border-radius: 8px 16px;

/* Top-left  Top-right/bottom-left  Bottom-right */
border-radius: 8px 16px 24px;

/* Top-left  Top-right  Bottom-right  Bottom-left (clockwise) */
border-radius: 8px 16px 24px 32px;

The shorthand follows the same clockwise pattern as margin and padding — top-left, top-right, bottom-right, bottom-left.

Individual Corner Properties

You can also set each corner individually:

border-top-left-radius:     8px;
border-top-right-radius:    16px;
border-bottom-right-radius: 24px;
border-bottom-left-radius:  32px;

Common Patterns

Pill / Capsule Shape

The go-to for buttons, tags, and badges — a large enough value that the radius meets in the middle:

.pill {
  border-radius: 999px; /* or 9999px — anything large enough */
}

Using 999px rather than 50% is intentional — 50% on a non-square element produces an ellipse, not a pill. 999px is clamped to the maximum possible radius, producing the capsule shape regardless of the element's dimensions.

Perfect Circle

.circle {
  width: 80px;
  height: 80px;
  border-radius: 50%; /* 50% works perfectly on a square element */
}

Card (Standard)

.card {
  border-radius: 12px; /* 8–16px is the common range for cards */
}

One Rounded Corner (Chat Bubble Style)

.bubble-right {
  border-radius: 18px 18px 4px 18px; /* bottom-right stays sharp */
}
.bubble-left {
  border-radius: 18px 18px 18px 4px; /* bottom-left stays sharp */
}

Top-Only Rounded (Tab Style)

.tab {
  border-radius: 8px 8px 0 0; /* top corners rounded, bottom square */
}

The Elliptical Syntax

The most powerful (and least-known) feature of border-radius is the elliptical variant, using a slash to separate horizontal and vertical radii:

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

/* Per-corner elliptical radii */
border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%;

The slash syntax lets each corner have a different horizontal and vertical radius — producing organic, blob-like shapes that are impossible to achieve with the standard syntax alone. This is how CSS "blob" shapes are created.

/* Classic CSS blob */
.blob {
  border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
  background: linear-gradient(135deg, #00d4aa, #0ea5e9);
  width: 200px;
  height: 200px;
}

Percentage Values

Percentage values in border-radius are relative to the element's dimensions — horizontal percentage to width, vertical percentage to height. This means the same percentage value produces different visual results on elements of different sizes, and on non-square elements, circular percentages produce ellipses.

/* On a 200×100px element, 50% gives an ellipse, not a circle */
.ellipse {
  width: 200px;
  height: 100px;
  border-radius: 50%;
}

Border Radius and overflow

A common gotcha: border-radius only clips the visual border — it doesn't clip child content by default. If you have an image or background colour that bleeds outside the rounded corners, add overflow: hidden:

.card {
  border-radius: 12px;
  overflow: hidden; /* clips child images to the rounded corners */
}