Visually design CSS border-radius shapes — from simple rounded corners to organic blobs.
Design any CSS border-radius visually — from subtle rounded corners to pills and organic blob shapes. Drag the sliders, tweak per-corner values, or jump to a preset, and copy production-ready CSS. Everything runs in your browser.
Pick a mode
Use Simple for uniform rounded corners, Advanced for per-corner control, or Blob for organic eight-value shapes.
Choose a unit
Switch between px, % and em. Percentages are best for fluid blob shapes that scale with the element.
Tweak or apply a preset
Adjust sliders for each corner, or click a preset like Rounded, Pill, or Blob 1–3 to get started quickly.
Copy the CSS
Grab the generated border-radius declaration with the Copy button and drop it into your stylesheet.
CSS lets you specify horizontal and vertical radii separately for each corner using the `a b c d / e f g h` syntax. The values before the slash are horizontal radii (top-left, top-right, bottom-right, bottom-left) and the values after are the matching vertical radii. This is what powers organic blob shapes.
Percentages scale the radius relative to the element's size, which keeps shapes consistent when the element resizes. Pixels stay fixed regardless of element dimensions.
No. Everything lives in your browser — nothing is saved or uploaded.
Set the element to a square (equal width and height) and use Simple mode with 50% as the value.