Design & CSS

Border Radius + Blob Generator

Design pixel-perfect corners with per-corner units and elliptical X/Y, or generate reproducible organic blobs from a single seed — copy CSS, Tailwind, React, or SVG.

Live preview

Drag any corner handle to grow that corner. Hold Shift to split X / Y.

Tip: drag a corner handle inward. Shift-drag for elliptical X / Y.

Width (px)Height (px)Background

Border color

Per-corner controls

Pick units, link corners, and dial in the exact value you need.

Top left

Top right

Bottom right

Bottom left

Code output

Copy the shorthand, longhand, Tailwind, React or SVG variant.

Shorthand

border-radius: 24px;

Longhand

border-top-left-radius: 24px;
border-top-right-radius: 24px;
border-bottom-right-radius: 24px;
border-bottom-left-radius: 24px;

Value: 24px