Create custom border radius with individual corner control, linked/unlinked mode, px/% units, interactive corner sliders on preview, and 12 shape presets
Fine-tune border-radius values for each corner independently, preview the shape in real time, and copy the CSS. Supports shorthand and per-corner syntax.
Initializing in your browser…
Create custom CSS clip-path shapes visually. Drag points to customize polygons, circles, and complex shapes.
Create stunning CSS gradients with linear/radial/conic types, angle control, position control, multiple color stops, 11 presets, and reverse/randomize features
Design complex box shadows with multi-layer support, inset shadows, visibility toggle, layer reordering, opacity control, and 12 professional presets
You want an organic "blob" avatar frame, which needs the eight-value elliptical border-radius syntax most people never write by hand.
Handles dragged to
Asymmetric blob preset, nudged toward top-left
Resulting CSS
border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
The slash splits horizontal radii (before) from vertical radii (after), letting each corner be an ellipse rather than a circle, that is what produces the irregular, lava-lamp silhouette. Hand-authoring eight coupled percentages is painful; dragging the handles and copying the exact declaration is not.
Fine-tune border-radius values for each corner independently, preview the shape in real time, and copy the CSS. Supports shorthand and per-corner syntax.
Set a large uniform radius to create pill or capsule shapes for buttons and tags.
Combine asymmetric values to create organic, blob-like containers for creative layouts.
Setting it to 50% on a square element creates a circle. Values above 50% have no additional visual effect.
Yes. The CSS border-radius shorthand supports "/" syntax to set elliptical corners (e.g., 10px 20px / 30px 40px).
This runs as client-side JavaScript. Keys, tokens, payloads, and other inputs never leave your device.