Border Radius Generator
Round corners visually — drag the corners of the preview, or switch to organic blob shapes.
Drag the corner dots to round them
Horizontal radii
Vertical radii
How the Border Radius Generator Works
Design rounded corners by dragging the preview, then copy a clean border-radius value — including organic blob shapes.
Drag the Corners
Grab any corner dot on the preview and drag it inward — the radius follows your pointer. Link all corners for a uniform radius or shape each one independently.
Blob Shapes
Switch to blob mode for the 8-value slash syntax — horizontal and vertical radii per corner produce smooth, organic shapes popular in modern hero sections and avatars.
Randomize
One click generates a fresh organic blob. Keep clicking until you find a silhouette you like, then fine-tune the sliders.
Clean Output
The generated value collapses to the shortest correct form — a single value for uniform corners, four values, or the full slash syntax for blobs.
Frequently Asked Questions
border-radius accepts horizontal and vertical radii separated by a slash: h1 h2 h3 h4 / v1 v2 v3 v4. Each corner becomes a quarter-ellipse instead of a quarter-circle, which is how organic blob shapes are made in pure CSS.
Pixels give a fixed corner size regardless of element dimensions — best for cards and buttons. Percentages scale with the element — 50% on a square makes a perfect circle, and percent values are what blob shapes rely on.
No — border-radius is rasterized by the compositor and is extremely cheap, even combined with overflow: hidden or transforms. It is safe to animate with transition as well.
Circle: equal width and height plus border-radius: 50%. Pill: any rectangle with border-radius of at least half its height — 999px is the common shorthand.