Border Radius & Blob Generator

Design smooth rounded corners and organic blob shapes with this free border radius generator. Drag per-corner sliders, switch on the full 8-value slash syntax for asymmetric blobs, preview every change live, then copy clean CSS or Tailwind classes. Try the presets or hit randomize to discover a shape fast. It runs entirely in your browser, so nothing is uploaded, no signup is needed, and your work stays completely private.

How to use the border radius generator

1. Start from a preset or a square. Pick a ready-made shape (rounded card, pill, circle, or blob) to give yourself a starting point, or begin with a plain box and shape it from scratch.
2. Adjust each corner. Use the per-corner sliders to set the radius for the top-left, top-right, bottom-right, and bottom-left corners independently, and watch the live preview update in real time.
3. Switch on the 8-value slash mode. Enable the advanced horizontal / vertical controls to pull each corner into an asymmetric curve. This is what turns a boxy shape into an organic blob.
4. Randomize for inspiration. Hit the randomize button to generate an unexpected blob. Keep tapping until something clicks, then fine-tune by hand.
5. Choose your units. Toggle between percentages and pixels to control how the shape responds as the element resizes.
6. Copy the output. Grab the ready-to-paste CSS border-radius declaration or the equivalent Tailwind class and drop it straight into your project.

How the CSS border-radius shorthand works

The border-radius property rounds the corners of any element, and the shorthand accepts one to four values. The number of values you pass decides how those corners are assigned. One value rounds all four corners equally; two values split the work between one diagonal pair and the other; three and four values let you address corners more precisely. The order always runs clockwise, starting from the top-left.

If you only ever need symmetrical rounding, these one-to-four value forms cover everything. The fun starts when you reach for the slash.

The 8-value slash syntax and how blobs work

Every corner of a box is actually an elliptical arc, which means it has two radii: one horizontal and one vertical. The shorthand hides this by assuming both are equal. To control them separately you use a slash: the values before the slash set the horizontal radii, and the values after it set the vertical radii. With four values on each side you get eight numbers in total, one horizontal and one vertical radius for every corner.

When the horizontal and vertical radii of a corner differ, that corner stretches into a lopsided curve. Do this around all four corners and the rigid box dissolves into a smooth, organic blob. A classic starting point looks like this:

border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;

Read it as four horizontal radii (top-left, top-right, bottom-right, bottom-left) followed by a slash and four vertical radii in the same order. Nudge any single number and the blob shifts its weight to one side. Because the generator exposes all eight values as sliders, you can sculpt these shapes visually instead of guessing at percentages.

Using blobs and rounded shapes in real UI

Organic shapes have a practical home in modern interfaces. A blob makes a friendly avatar frame, softens the background behind a hero headline, or adds personality to a call-to-action button. Set the same border-radius on an image to mask it into a custom silhouette without exporting a new asset. Pills (a fully rounded button using a large radius) read as interactive and are a reliable pattern for tags and filters.

A few things to keep in mind. Rounding corners with border-radius is cheap to render and, unlike clipping with images, it scales crisply at any resolution. It does not affect the accessible name, focus order, or semantics of an element, so a rounded button is still announced as a button. Just make sure your shape never clips essential text or icons, and keep enough padding inside a heavily curved container so content does not collide with the edges. For purely decorative blobs, mark them with aria-hidden="true" so screen readers skip them.

Percentage vs pixel radii and responsiveness

The unit you choose changes how a shape behaves when its element resizes. A pixel radius such as border-radius: 12px stays a fixed size no matter how wide the box grows, which keeps card corners consistent across a layout. A percentage radius is relative to the element’s own dimensions, so it flexes with the box. That is exactly why blobs use percentages: the shape holds its proportions whether the element is small or large.

A useful rule of thumb: use pixels (or a fluid unit) for predictable component corners, and use percentages when you want a shape that morphs with its container. To turn any square into a perfect circle, set border-radius: 50%. For consistently smooth scaling across breakpoints, percentages and the 8-value syntax are your friends.

Common border-radius recipes and reference values

Most interface shapes come down to a handful of dependable values. Use this quick reference as a starting point, then fine-tune in the generator until the preview matches your design.

Squircles and the new corner-shape property

Plain border-radius always draws a circular or elliptical arc. The newer corner-shape property changes how that corner is drawn while border-radius still controls its size. Pair them to unlock a squircle, the smooth blend between a square and a circle used by many app icons: border-radius: 24px; corner-shape: squircle;. Under the hood a squircle is a superellipse, so corner-shape: superellipse(2) produces the same curve, while higher numbers move toward a sharp square and lower numbers toward a rounder, scooped look. Other keywords include bevel for a flat cut, and notch and scoop for concave corners. Support is still rolling out across browsers, so treat corner-shape as a progressive enhancement: a standard rounded corner is the natural fallback wherever it is not yet recognized.

Frequently asked questions

What does the slash mean in border-radius?

The slash separates horizontal radii from vertical radii. Values before the slash set the horizontal radius of each corner, and values after it set the vertical radius. This lets each corner be an asymmetric ellipse rather than a simple quarter-circle.

How do I make a blob shape?

Use the 8-value slash syntax with differing horizontal and vertical percentages per corner, for example border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;. The easiest path is to enable slash mode in the generator and drag the sliders until the preview looks right.

Should I use px or % for border-radius?

Use pixels for fixed, predictable corners on cards and buttons. Use percentages when you want the radius to scale with the element, which is essential for blobs and for perfect circles that stay round at any size.

How do I make a perfect circle?

Apply border-radius: 50% to an element that is a perfect square (equal width and height). If the element is not square you will get an ellipse instead, which can also be useful.

Can you animate border-radius?

Yes. border-radius is animatable, so you can transition or keyframe it for morphing blob effects. Animating shape changes can trigger layout work, so keep animations short and test on lower-powered devices for smooth performance.

What are the Tailwind rounded classes?

Tailwind ships utilities like rounded, rounded-lg, rounded-full, and corner-specific variants such as rounded-tl-xl. For custom blob values, use an arbitrary value like rounded-[30%_70%_70%_30%/30%_30%_70%_70%]. The generator outputs both standard CSS and a Tailwind-ready class.

Does it work on every browser?

The border-radius property, including the slash syntax for elliptical corners, is supported across all modern browsers. No prefixes or fallbacks are needed for current versions of Chrome, Firefox, Safari, and Edge.

Is the generator free and private?

Yes on both counts. The tool is completely free with no signup, and it runs 100% in your browser. Your shapes and CSS are never uploaded to a server, so everything stays on your device.

How do I make a squircle in CSS?

Combine a normal radius with the corner-shape property, for example border-radius: 24px; corner-shape: squircle;. The radius sets the corner size and corner-shape: squircle (equivalent to superellipse(2)) gives the iOS-style smoothing. In browsers that do not support it yet, the element simply falls back to a regular rounded corner.

What border-radius makes a pill button?

Set a radius equal to or larger than half the element’s height. The simplest approach is a very large value like border-radius: 9999px;, which the browser clamps to half the height and renders as fully semicircular ends no matter the button’s size or content length.

Does border-radius clip the background or affect the border?

Yes. border-radius rounds the border edge and clips the background, so both the border and the background color or image follow the curve. It does not, however, clip overflowing child content unless you also set overflow: hidden on the element.

Related design tools & guides

• Box Shadow Generator — layer soft, realistic shadows and copy the CSS.
• CSS Clamp Calculator — build fluid, responsive sizes with one line.
• Cubic Bezier Editor — craft custom easing curves for your animations.
• Browse all free design tools — the full collection of browser-based generators.