Rounded Corners, from Subtle to Blob
Corner rounding is one of the strongest personality signals in an interface: sharp corners read as formal and technical, gentle rounding as friendly and modern, full pills as playful. CSS controls all of it with border-radius — deceptively simple for uniform rounding, surprisingly deep once each corner and even each axis of each corner can differ. This generator covers the whole range visually: drag sliders, watch a live preview box, and copy the exact rule, whether you need a standard card radius or an organic blob shape for a hero section.
Three Modes for Three Jobs
- Uniform: one slider rounds all corners equally — the everyday mode for buttons, cards, inputs and images.
- Per-corner: four independent sliders. Round only the top corners of a tab, only the leading corners of a chat bubble, or three corners of a “torn note” card.
- Blob: the eight-value syntax (
border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%) gives every corner separate horizontal and vertical curvature, producing smooth, organic, asymmetric shapes. A randomize button explores blob space until one fits your design.
Values That Look Professional
Interface conventions have converged on recognizable ranges: 4–6px reads as crisp and businesslike (form controls, dense dashboards); 8–12px is the friendly modern default for cards and buttons; 16–24px feels soft and consumer-app; 9999px on a one-line element produces the pill shape of tags and toggle buttons. For a perfect circle, apply 50% to a square element — the technique behind every round avatar on the web. The deeper rule is consistency: pick two or three radius values for the whole product and apply them by element class, because mixed arbitrary radii register subconsciously as sloppiness even when no one can name the problem.
The Nesting Detail That Separates Tidy from Off
When a rounded element sits inside another rounded element — an image inside a card, a button inside a banner — equal radii look subtly wrong: the inner corner appears to bulge. The optically correct relationship is inner radius = outer radius − padding. A 16px card with 8px padding wants an 8px image radius inside it. This tiny formula fixes a visual itch most people feel but cannot diagnose, and the generator's preview lets you verify the relationship before committing.
About Blobs, Briefly
Organic shapes earn their keep as decoration: hero-section image masks, background accents, feature-section illustrations. The eight-value syntax remains pure CSS — resolution-independent, animatable (transition between two blob radii for a gentle morphing effect), and rendered for free by the browser, with none of the weight of SVG masks or images. Keep blob usage to one or two per view; as with all strong shapes, scarcity is what preserves the charm. Everything the generator emits is standard CSS with universal browser support, produced locally in your browser with a live preview that is the single source of truth: the shape you see is exactly the shape you ship.
One last tip: when your radius needs to scale with the element — chat bubbles, pills, responsive cards — consider generating your value here and then expressing it in relative units in production, such as em values tied to font size. The generator's pixel preview tells you the right visual proportion; translating it to relative units keeps that proportion intact when the component grows or shrinks on different screens.
Frequently Asked Questions
How do I make a perfect circle with border-radius?
Apply border-radius: 50% to an element with equal width and height. On non-square elements, 50% produces an ellipse instead — the square requirement is the detail people miss.
What is the slash syntax like 30% 70% / 50% 40%?
Values before the slash set each corner’s horizontal curvature; values after set the vertical. Different curvatures per axis produce asymmetric, organic “blob” corners that single values cannot create.
What radius should I use for cards and buttons?
8–12px is the modern default that suits most products; 4–6px reads more formal, 16–24px more playful. Most important is consistency — define two or three values and reuse them everywhere.
Why does an image inside a rounded card look slightly wrong?
Equal inner and outer radii create an optical bulge. Use inner radius = outer radius minus the padding between them: a 16px card with 8px padding wants an 8px-radius image.