Most developers use border-radius for one thing: rounded corners on cards and buttons. But border-radius is actually one of CSS's most expressive properties - capable of producing circles, pills, organic blobs, teardrops, leaves, and asymmetric shapes that bring modern UI design to life. This guide breaks down the full syntax and delivers 12 ready-to-use shape recipes.
1. Beyond border-radius: 8px - The Full Syntax
The shorthand border-radius accepts up to 8 values separated by a forward slash - 4 for the horizontal radii and 4 for the vertical radii of each corner. This is what enables elliptical (egg-shaped) corners and organic blobs.
/* 1 value: all 4 corners equal */
border-radius: 16px;
/* 2 values: top-left/bottom-right | top-right/bottom-left */
border-radius: 16px 8px;
/* 4 values: top-left | top-right | bottom-right | bottom-left */
border-radius: 16px 8px 24px 4px;
/* The slash syntax - horizontal / vertical radii */
/* Each corner can have a different ellipse shape */
border-radius: 40px 20px 50px 30px / 20px 40px 30px 50px;
/* ←── horizontal ──→ ←──── vertical ────→ */The 4 values in order are always: top-left → top-right → bottom-right → bottom-left (clockwise from top-left). The values before the slash control horizontal ellipse radius; values after control vertical ellipse radius.
2. Individual Corner Control
Each corner has its own longhand property. Each longhand also accepts two values - horizontal and vertical radii separated by a space:
/* Longhand individual corner properties */
border-top-left-radius: 16px; /* circular */
border-top-right-radius: 16px 32px; /* elliptical */
border-bottom-right-radius: 4px;
border-bottom-left-radius: 4px;
/* Equivalent shorthand */
border-radius: 16px 16px 4px 4px / 32px 32px 4px 4px;
/* Useful pattern: sharp bottom corners, rounded top */
.card-header {
border-top-left-radius: 16px;
border-top-right-radius: 16px;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}3. 12 Creative Shape Examples
1. Circle
50% on a square element. The classic avatar shape.
.circle {
width: 96px;
height: 96px;
border-radius: 50%;
}2. Pill / Capsule
A very large radius that always exceeds the element's height - creating a fully rounded "pill". Used for tags and badge buttons.
.pill {
border-radius: 9999px; /* or 999em */
padding: 0.5rem 1.5rem;
}3. Squircle (App Icon Shape)
The shape used by iOS app icons - between a square and a circle. CSS can approximate it with a large percentage radius.
.squircle {
width: 96px;
height: 96px;
border-radius: 30%;
/* For a truer squircle, use clip-path with SVG */
}4. Organic Blob
Achieved with the slash syntax. Four different horizontal radii and four different vertical radii create an asymmetric, fluid shape.
.blob {
border-radius: 60% 40% 30% 70%
/ 60% 30% 70% 40%;
}5. Asymmetric Card
Diagonal corners rounded, giving cards a dynamic, playful feel. Great for feature highlights or pricing cards.
.asymmetric-card {
border-radius: 24px 4px 24px 4px;
/* top-left=24, top-right=4,
bottom-right=24, bottom-left=4 */
}6. Leaf Shape
A single pointed corner and a rounded side creates a botanical leaf. Use for eco-brands, nature-themed UIs, or decorative elements.
.leaf {
width: 96px;
height: 96px;
border-radius: 0% 100% 100% 0%
/ 50% 50% 50% 50%;
transform: rotate(45deg); /* optional */
}7. Speech Bubble Shape
A chat bubble effect by setting one corner to near-zero. The "tail" corner is bottom-left (4px) while all others are rounded.
.speech-bubble {
border-radius: 16px 16px 16px 4px;
/* Add a ::after for the tail triangle */
}
.speech-bubble::after {
content: '';
position: absolute;
bottom: -8px; left: 0;
border: 8px solid transparent;
border-top-color: currentColor;
border-right: 0;
}8. Wave / Wavy Card
Alternating 100%/0% creates a wavy, abstract shape. Use as decorative dividers or background accent blobs.
.wave {
border-radius: 100% 0% 100% 0%
/ 0% 100% 0% 100%;
}9. Teardrop
Using an elliptical top (taller than wide) with matching radii on all sides but different horizontal/vertical ratios. Great for map pin icons.
.teardrop {
width: 80px;
height: 96px;
border-radius: 50% 50% 50% 50%
/ 60% 60% 40% 40%;
}10. Badge Shape
Diagonal pattern with small/large alternating corners - creates a "folded label" feel. Works well for version badges and status tags.
.badge {
border-radius: 4px 12px 4px 12px;
padding: 2px 10px;
}11. Skewed Card
Sharp on two diagonal corners, rounded on the other two. Creates a stylized, editorial card shape.
.skewed-card {
border-radius: 0 32px 0 32px;
/* or: top-right and bottom-left rounded */
}12. Lozenge / Diamond
A circle rotated 45°, or stretched with scaleX(). Use as decorative bullet points or icon backgrounds.
.lozenge {
width: 60px;
height: 60px;
border-radius: 50%;
transform: rotate(45deg) scaleX(0.6);
}
/* Or a true diamond: */
.diamond {
width: 60px;
height: 60px;
transform: rotate(45deg);
border-radius: 4px; /* softened corners */
}4. Using Percentage Values
When you use percentage values, the horizontal radius is calculated relative to the element's width, and the vertical radius relative to its height. This means a 50% border-radius on a square produces a circle, but on a rectangle it produces an ellipse.
/* Square 200×200 → perfect circle */
.circle { width: 200px; height: 200px; border-radius: 50%; }
/* Rectangle 400×100 → ellipse (wider than tall) */
.ellipse { width: 400px; height: 100px; border-radius: 50%; }
/* Percentage pairs with the slash syntax */
.organic {
width: 300px; height: 200px;
/* Horizontal: % of width, Vertical: % of height */
border-radius: 60% 40% / 40% 60%;
}5. Animating Border Radius
border-radius is fully animatable with CSS transitions and keyframe animations. This is the technique behind "morphing blob" animations common in modern SaaS landing pages.
/* Morphing blob animation */
@keyframes morph {
0% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }
25% { border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%; }
50% { border-radius: 50% 40% 60% 30% / 30% 70% 40% 60%; }
75% { border-radius: 40% 60% 30% 70% / 60% 40% 70% 30%; }
100% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }
}
.animated-blob {
animation: morph 8s ease-in-out infinite;
}
/* Simple hover transition */
.card {
border-radius: 16px;
transition: border-radius 0.3s ease;
}
.card:hover {
border-radius: 24px 8px 24px 8px;
}6. Common Mistakes to Avoid
Using border-radius on inline elements
Inline elements (span, a) must have display: inline-block or display: block for border-radius to render visibly.
Forgetting overflow: hidden on rounded containers
Child elements can bleed outside rounded corners unless you add overflow: hidden to the parent.
Expecting 50% to always create a circle
50% creates a circle only on square elements. On rectangles it creates an ellipse. Use a fixed equal width and height for a true circle.
Using border-radius on elements with outline
CSS outline doesn't follow border-radius. Use box-shadow: 0 0 0 3px color instead for a rounded focus ring.
Over-animating border-radius on paint-heavy pages
Animating border-radius triggers layout recalculation. For complex pages, consider using clip-path instead, which the browser can GPU-composite.
Share this article
Generate Border Radius Visually
Use ColorPeek's interactive Border Radius tool to drag corners, preview shapes in real time, and copy production-ready CSS - no guesswork required.