CSS Border Radius Generator
Create rounded corners visually — per-corner control, elliptical radii, organic blob shapes with the eight-value syntax.
Last updated: April 2026 · Runs in your browser · No sign-up
border-radius: 12px;Going beyond round corners
The elliptical syntax (70% 30% 50% 50% / 50% 60% 40% 50%) lets you create asymmetric blob shapes popular in playful landing pages and brand illustrations. Combine with subtle rotation for even more organic feel.
Design system values
- Use a scale: 4, 8, 12, 16, 24, 32px — don't use arbitrary values.
- Match radius to element size: large cards want larger radii.
- Nested elements: inner radius = outer radius - padding.
Frequently Asked Questions
How does the 8-value syntax work?
border-radius accepts two lists separated by a slash: horizontal-radii / vertical-radii. With different values per corner, you get ellipses — the basis of organic blob shapes.
What's a good radius for buttons?
4–8px for sharp, professional UI. 12–16px for friendly, modern apps. 999px (or 9999px) for pill shapes. Match the radius to your brand's personality.
How do I make a circle?
border-radius: 50% on a square element. For rectangles, 50% creates an ellipse.
Why does border-radius sometimes not work on images?
Images inside a parent with overflow: visible show their corners. Either apply border-radius directly to the image, or set overflow: hidden on the parent.