CSS Border Radius: Circles, Pills, Blobs, and Squircles

The border-radius Syntax

/* Single value — all four corners equal */
border-radius: 8px;

/* Two values — top-left/bottom-right, top-right/bottom-left */
border-radius: 8px 16px;

/* Four values — top-left, top-right, bottom-right, bottom-left (clockwise) */
border-radius: 4px 8px 12px 16px;

/* Elliptical corners — horizontal / vertical radii */
border-radius: 50px / 20px;

/* Per-corner longhand */
border-top-left-radius: 8px;
border-top-right-radius: 8px;
border-bottom-right-radius: 8px;
border-bottom-left-radius: 8px;

Common Shapes

/* Circle (equal width and height required) */
.circle {
  width: 80px; height: 80px;
  border-radius: 50%;
}

/* Pill button */
.pill {
  border-radius: 9999px;  /* or border-radius: 100vmax */
}

/* Stadium (wide pill) */
.tag {
  padding: 4px 12px;
  border-radius: 9999px;
}

/* Card with slightly rounded corners */
.card {
  border-radius: 12px;
}

/* App icon / squircle approximation */
.icon {
  border-radius: 22.5%;  /* ~iOS icon rounding */
}

Elliptical Corners

/* Each corner has an X and Y radius */
/* Syntax: TL-x TR-x BR-x BL-x / TL-y TR-y BR-y BL-y */
border-radius: 40% 40% 60% 60% / 30% 30% 70% 70%;
/* This creates a rounded-bottom teardrop / blob shape */

Organic Blobs

Blobs are created by varying each corner's elliptical radius:

.blob {
  border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
  animation: morph 8s ease-in-out infinite;
}

@keyframes morph {
  0%   { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }
  50%  { border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%; }
  100% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }
}

The Squircle

Apple's iOS uses superellipse ("squircle") shapes for app icons — they differ from border-radius: 22% in that the curve is continuous from corner to side. CSS does not support true squircles natively, but a close approximation:

/* Close approximation with clip-path */
.squircle {
  clip-path: path("M 0,50 C 0,0 0,0 50,0 S 100,0 100,50 100,100 50,100 0,100 0,50");
}

/* Or with SVG clipPath for exact shapes */

Percentage Radii

Percentage radii are relative to the element's size — horizontal % is relative to width, vertical % to height. This is why border-radius: 50% creates a circle: both radii are 50% of their respective dimensions.

Generate Border Radius Visually

Use ToolsVito's Border Radius Generator to build any border-radius value with a live preview — from simple rounded corners to organic blobs.