What is the difference between Simple and Organic mode?

Simple rounds each of the four corners by a single fixed length (px, %, or rem) and is what most designs need. Organic uses the eight-value elliptical syntax — a horizontal and a vertical radius per corner, separated by a slash — which produces the smooth, lopsided "blob" shapes you can’t make with one radius per corner.

How do the draggable handles work in Organic mode?

Each of the eight handles maps to one of the eight elliptical radius values and is positioned along an edge of the preview box. Dragging a handle along its axis updates that value live. The same values are exposed as horizontal and vertical sliders per corner below the preview, so you can also adjust them precisely or via keyboard.

When should I use px, %, or rem for the radius?

Use px for a fixed visual radius regardless of element size, rem to scale the radius with the root font size, and % to make the radius relative to the element’s own dimensions — at 50% a square becomes a circle and the corners stay proportional as the element resizes. The slider’s maximum adjusts per unit (100px, 50%, or 6rem).

What does linking the corners do?

With corners linked, a single "All corners" slider sets the same radius on all four corners at once. Unlinking reveals four separate sliders so you can give each corner its own value — for example a card with rounded top corners and square bottom corners. Loading a gallery shape automatically links or unlinks based on whether its corners are equal.

Which export formats are supported?

Plain CSS, a CSS Variable, SCSS, Tailwind v4 (@theme), Tailwind v3 config, and a Tailwind arbitrary rounded-[…] class. The CSS-var and Tailwind named formats use the token name field so you get names like rounded-card or --radius-card. Border-radius needs no vendor prefixes in modern browsers.

Border Radius Generator

Round corners two ways — precise per-corner radii with px / % / rem units, or organic blob shapes with draggable handles (the 8-value elliptical syntax). Live preview, a shape gallery, and copy-ready CSS, SCSS, and Tailwind v3 / v4 output.

About this ToolHow it works, benefits & use cases

Round corners two ways from one tool. Simple mode rounds each corner by a fixed amount in px, %, or rem — link all four corners with the toggle for a uniform radius, or unlink them to round each corner independently for tabs, speech bubbles, and asymmetric cards. Organic mode uses the eight-value elliptical border-radius syntax to create smooth, blob-like shapes: drag the eight handles directly on the live preview, fine-tune each corner’s horizontal and vertical radius with sliders, or hit Randomize for an instant organic blob. The preview renders your shape as a gradient, a solid fill, or an outline so you can judge it in context, and a gallery offers ready-made shapes — from a pill to several blobs — as one-click starting points. When it looks right, export plain CSS, a CSS variable, SCSS, Tailwind v4 (@theme), Tailwind v3 config, or a Tailwind arbitrary rounded-[…] class. Everything runs in the browser and the full shape is captured in a shareable URL.

How to Use

1Choose Simple for fixed per-corner radii or Organic for elliptical blob shapes.
2In Simple, pick the unit (px, %, or rem) and either keep corners linked for one slider or unlink to set each corner.
3In Organic, drag the eight handles on the preview, adjust each corner’s horizontal/vertical sliders, or click Randomize.
4Switch the preview fill between Gradient, Solid, and Outline to check the shape in context.
5Click a gallery shape to load it as a starting point.
6Select an output format, set a token name for the named formats, and copy, download, share, or pipe the code.

Key Benefits

Simple per-corner radii in px, %, or rem with a link/unlink toggle
Organic blob shapes via the eight-value elliptical border-radius syntax
Eight draggable handles on the live preview, mirrored by keyboard-friendly sliders
Randomize button for instant organic blob shapes
Preview as gradient, solid, or outline; gallery of ready-made shapes
Six export formats including CSS variable, SCSS, Tailwind v3 + v4, and rounded-[…]
Shareable URL captures the exact shape — runs fully in the browser

Common Use Cases

Setting consistent card and button radii as a reusable CSS variable or token
Building organic blob backgrounds and avatar masks for landing pages
Creating asymmetric shapes like tabs and chat bubbles with independent corners
Exploring shapes quickly with Randomize, then refining the handles
Generating a Tailwind rounded-[…] class for an exact custom radius

Preview

Unit

All corners16px

Gallery

Output format

CSS output

Copy, download, share, or pipe to another tool

border-radius: 16px;

Simple vs. organic

Simple rounds each corner by a fixed amount in px, %, or rem — link the corners for a uniform radius or unlink them for asymmetric shapes. Organic uses the eight-value elliptical syntax (… / …) to create smooth blob shapes — drag the handles or hit Randomize. Export to plain CSS, CSS variables, SCSS, and both Tailwind v3 (config) and v4 (@theme), plus a rounded-[…] arbitrary class.

Was this tool helpful?

Share Your Experience

Help others discover this tool!

Share on

Border Radius Generator

How to Use

Key Benefits

Common Use Cases

Gallery

Simple vs. organic

Was this tool helpful?

Share Your Experience

Related tools

Frequently Asked Questions - Border Radius Generator