Border Radius Generator

The full border-radius shorthand supports 8 values separated by a slash: border-radius: TL-H TR-H BR-H BL-H / TL-V TR-V BR-V BL-V. The values before the slash control horizontal radii, and the values after control vertical radii. This creates elliptical corners rather than circular ones. For example, border-radius: 50% 30% 70% 40% / 60% 50% 40% 70% creates an organic blob shape. This is what the Blob mode in this tool uses.

px values create fixed-size rounded corners regardless of the element size — border-radius: 20px always produces 20px corners. % values are relative to the element's dimensions — border-radius: 50% on a square creates a perfect circle, while on a rectangle it creates an ellipse. Use px for consistent design system tokens; use % when you want the rounding to scale proportionally with the element size.

Set border-radius: 50% on a square element (equal width and height). The 50% value rounds each corner by half the element's dimension, and on a square, this produces a perfect circle. On a rectangular element, border-radius: 50% creates an ellipse. To create a circle from a rectangle, use clip-path: circle() instead.

Organic blob shapes are asymmetric, fluid-looking forms created using the 8-value border-radius shorthand with varying horizontal and vertical radii. They are popular in modern web design for decorative background elements, hero section accents, profile picture frames, floating accent shapes, and abstract art. The Blob mode in this tool lets you create these shapes with presets and a randomize button.

Yes. border-radius is fully animatable with CSS transitions and animations. You can smoothly transition between different radius values — for example, from a rounded rectangle to a circle or between different blob shapes. The browser interpolates each of the 8 radius values independently, producing smooth shape morphing effects. This is commonly used for hover effects and loading animations.

Set a border-radius larger than half the element's height — the standard trick is border-radius: 9999px (or 999px). The browser caps the radius at half the smallest dimension, so any value bigger than that produces perfectly semicircular ends regardless of the button's actual height, and it adapts automatically if the height changes. This beats using 50% (which only makes a circle on a square, and an ellipse on a wide element) because 9999px gives you flat top and bottom edges with fully rounded left and right ends — the classic pill. Use it for tags, chips, toggle buttons, and call-to-action buttons. The same large-radius approach makes any rectangle into a stadium shape.

Because CSS border-radius draws a true CIRCULAR arc, while iOS icons use a 'squircle' — a superellipse where the curve blends more gradually into the straight edges, avoiding the subtle 'corner' where a circular arc meets the side. The circular arc has a visible point of curvature change that the eye reads as slightly less smooth; the squircle's continuous curvature looks more organic and premium. Plain border-radius can't produce a true squircle. To get that effect you need clip-path with an SVG/path superellipse, an SVG mask, or the experimental corner-shape CSS property (limited support). For most UI, a well-chosen border-radius is fine, but if you're chasing that exact iOS-icon smoothness, border-radius alone won't get you there.