Border Radius Generator with Blob Shapes

Per-corner CSS border radius

border-radius rounds the corners of an element's border box, and with it the background, the border and any box-shadow. The shorthand takes one to four values that go clockwise from the top-left: top-left, top-right, bottom-right, bottom-left. One value applies to every corner, two values pair opposite corners (top-left with bottom-right, top-right with bottom-left), and three values reuse the second for the bottom-left. This border radius generator always writes the shortest shorthand that produces the same shape, so 16px 16px 16px 16px comes out as 16px.

In Per-corner mode, leave Corners linked on to move all four together, or switch to independent corners to round only some of them. Rounding just the top corners suits tabs and cards with an image header; rounding three corners and leaving one square gives a speech-bubble look.

Pick the unit that matches the intent. px keeps the curve the same size at any element size and is the usual choice for buttons and cards. rem scales with the user's root font size, which keeps radius proportional to text if someone enlarges it. Percent is measured against the element's own width for horizontal radii and height for vertical radii, so 50% turns a square into a circle and a rectangle into an ellipse. For a pill-shaped button use a very large px value such as 9999px: browsers scale overlapping radii down until they fit, which gives perfect semicircular ends at any width.

Blob shapes with the 8-value syntax

Every corner actually has two radii, one horizontal and one vertical, which turns it into a quarter of an ellipse instead of a quarter of a circle. The full syntax lists the four horizontal radii, a slash, then the four vertical radii: border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%. Mixing different values on each side of the slash is what produces the soft, organic blob shape CSS designers use for avatars, decorative backgrounds and hero illustrations. The technique is often called fancy border radius.

Blob mode exposes all eight percentages as sliders. Randomize blob picks new values in a way that keeps the two radii along each edge summing to 100%, which keeps the edges smooth instead of producing flat sections or sharp dents. Press it a few times until a shape looks right, then fine-tune individual sliders. The preview animates between shapes, and if you put two of these values in a CSS animation, the browser will morph between them in the same way.

Blobs work on any element, including images: apply the radius to an img with object-fit: cover and the photo is clipped to the blob. Keep important content away from the edges, because the corners can cut in deeply.

Copying the output

The CSS block is a single border-radius declaration. The Tailwind block uses arbitrary values: rounded-[16px] when all corners match, or separate rounded-tl-[], rounded-tr-[], rounded-br-[] and rounded-bl-[] classes when they differ, and one rounded-[...] class with underscores and a slash for blob shapes. Arbitrary values keep the exact numbers, which matters because Tailwind's named radius steps changed between v3 and v4.