Round corners visually, including the slash syntax that produces organic blob shapes.
Uncheck the link to give each corner a different horizontal and vertical radius. That slash syntax is what makes blob shapes.
border-radius: 60% 40% 60% 40%;
Percentages scale with the element and are what you want for blobs and circles. Pixels stay fixed, which is right for cards, buttons and inputs.
Each corner has its own slider. Uncheck the link and you get a second set for the vertical radii, which is where organic shapes come from.
The preview updates live and the output uses the shorthand, collapsing to the simple form when both axes match so you do not ship longer CSS than you need.
It separates horizontal from vertical radii. The values before the slash set the horizontal radius of each corner and the values after set the vertical, which is how you get an ellipse-shaped corner instead of a circular one.
Use percentages, uncheck the link, and give the horizontal and vertical sets different values. Something like 60% 40% 60% 40% over 40% 60% 40% 60% produces the classic organic blob.
Pixels for interface elements, because the corner should not change when the element resizes. Percentages for decorative shapes, because they scale with the box and keep the proportion.
Set every corner to 50 percent on a square element. If the element is not square you get an ellipse, which is often what you actually want for an avatar.
Browsers scale radii down proportionally when adjacent corners would overlap. If two corners on the same edge add up to more than the edge length, both are reduced to fit.
The background and border follow the curve, but child content does not unless you add overflow hidden. That is the usual reason an image pokes out of a rounded card.
No. Everything runs in your browser and nothing is sent to a server.
Yes, completely free with no sign-up.
Build layered CSS box shadows with a live preview, then copy them as plain CSS or a Tailwind arbitrary value.
Open ToolDraw clip-path shapes by dragging points, or use circle, ellipse and inset.
Open ToolMinify or beautify CSS with strings and data URIs left intact, and see how much smaller it got.
Open Tool