CSS Border Radius Generator: Per-Corner & Blob [2026]

Border radius is the design primitive that shifted UIs from sharp corners (1995-2010) to soft corners (2010-now) and is now the difference between “modern” and “dated” interfaces. Get the value right and your card looks polished; get it wrong and it looks like a bootstrap default. Most CSS border-radius generators only show the simple uniform-corner case; the interesting work is per-corner control and the rarely-used elliptical syntax that produces organic blob shapes.

Our CSS border radius generator handles all three modes — uniform, per-corner, and elliptical — with a live preview and copy-ready CSS. This guide explains the right values for each UI element, the elliptical syntax that produces blob shapes, and the framework-specific shortcuts.

Standard border-radius values for UI elements

The “design system rhythm” rule: use 2-3 distinct radius values across your UI, not one per component. A typical system: 6 px (form inputs, small buttons), 12 px (cards, tags-as-rectangles), 999 px (pills, avatars, dots). Inconsistent radii (6/8/10/14 mixed across components) reads as unintentional.

Per-corner border radius — when uniform won’t do

/* Uniform — all four corners */
border-radius: 12px;

/* Per-corner: top-left, top-right, bottom-right, bottom-left */
border-radius: 12px 12px 0 0;       /* card with attached top */
border-radius: 0 12px 12px 0;       /* tab attached to left side */
border-radius: 12px 12px 12px 4px;  /* speech-bubble pointer */

Per-corner control is essential for tabs, speech bubbles, attached cards, and any element that visually “connects” to another. The 4-value shorthand follows the same clockwise order as padding and margin — top, right, bottom, left.

Elliptical border radius — the blob shape secret

The 8-value border-radius syntax produces elliptical corners, which when used asymmetrically across corners creates organic “blob” shapes:

/* The full syntax: horizontal-radii / vertical-radii */
border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
/*              ^---horizontal--^   ^----vertical---^
   tl, tr, br, bl                 tl, tr, br, bl  */

Each corner gets two radii (horizontal + vertical), making the corner an ellipse rather than a circle. When the values are deliberately asymmetric, the result reads as organic / hand-drawn — useful for hero illustrations, decorative shapes, and modern “blob” backgrounds. Our generator includes a “blob” mode that randomises asymmetric values for instant organic shapes.

How to use the browser border radius generator

1. Open the CSS border radius generator
2. Pick a mode: Uniform (one slider for all four corners), Per-corner (4 sliders), or Blob (8 values, randomisable)
3. Drag sliders to shape the preview
4. Toggle preset (Card, Pill, Avatar, Tab-left, Tab-right, Speech bubble, Blob)
5. Copy CSS or Tailwind utility output

Tailwind CSS shortcuts

rounded-none    /* 0 */
rounded-sm      /* 2px */
rounded         /* 4px */
rounded-md      /* 6px */
rounded-lg      /* 8px */
rounded-xl      /* 12px */
rounded-2xl     /* 16px */
rounded-3xl     /* 24px */
rounded-full    /* 9999px */

/* Per-corner */
rounded-t-lg                    /* top-left + top-right */
rounded-tl-lg                   /* top-left only */
rounded-tl-2xl rounded-br-2xl   /* mixed corners */

Common mistakes

• Same radius on small + large elements. 8 px reads tight on a small button but looks dated on a large card. Scale radius with element size — small (6 px), medium (10-12 px), large (14-16 px).
• Forgetting that border-radius: 50% only gives a circle on square elements. On a rectangle, 50% produces an ellipse. For pills, use border-radius: 999px.
• Inheriting from images on overflow. If a child image overflows a parent with rounded corners, set overflow: hidden on the parent or apply the same border-radius to the image directly.
• Inconsistent radii across the design system. Pick 2-3 standard values and use them everywhere. Random radii read as unintentional.

Frequently asked questions

What’s the difference between border-radius and clip-path for rounded shapes?

border-radius rounds the corners of the element’s box. clip-path can produce arbitrary shapes (polygons, circles, complex paths). For simple rounding, border-radius is faster (GPU-accelerated, fewer paint cycles). For non-rectangular shapes (heart, star, custom polygon), clip-path is the right tool. They can be combined — a rounded element clipped to a custom path.

Can I animate border-radius?

Yes — border-radius animates smoothly via CSS transitions and keyframes. Browsers handle this efficiently. Common use: card hover states that morph from rectangle to slightly-rounded as a “lifted” effect.

Why do my rounded images have sharp corners?

Two common causes: (1) the parent has rounded corners but doesn’t have overflow: hidden, so the image overflows; (2) you applied border-radius to the parent but not the image directly. Fix: either apply overflow: hidden + border-radius to the parent, or border-radius directly to the image.

What’s a good radius for a button?

6-10 px for standard buttons matches modern design systems (Stripe, Linear, Apple HIG). Pills (999 px or rounded-full) for marketing CTAs and tags. The same value across all your buttons in a design system; don’t vary.

Will the generator output match the preview exactly?

Yes — the preview and the generated CSS are computed from the same values. Drop the CSS into your stylesheet and you get pixel-identical results.

Is my data sent anywhere?

No. The generator runs entirely in your browser. Slider values, preview, and CSS output stay on your device.

Related tools and guides

• CSS Border Radius Generator
• CSS Clip Path Generator
• CSS Box Shadow Generator
• CSS Gradient Generator
• SVG Blob Generator
• All CSS tools