Border Radius Generator
Visually craft CSS border-radius values — including the 8-value slash syntax for organic blob shapes
Corner settings
Examples
Pill button
border-radius: 9999px;Setting an extremely large radius on all corners produces a fully rounded pill shape that adapts to any element size.
Organic blob
border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;The slash syntax lets each corner have a different horizontal and vertical radius, creating the fluid, amoeba-like shapes popular in modern UI design.
Details
The CSS border-radius property accepts up to eight values using the slash syntax (a b c d / e f g h) that controls horizontal and vertical radii independently for each corner — unlocking organic blob shapes and asymmetric curves. This generator lets you dial in all four corners with sliders in px or %, toggle advanced mode for separate horizontal/vertical radii, see the shape update in real time, and copy the finished CSS rule. Everything runs locally in your browser.
Related guides
Related tools
Aspect Ratio Calculator
Calculate dimensions and ratios for images and videos.
Box Shadow Generator
Visual CSS box-shadow generator. Create beautiful shadows with live preview and copy the CSS code.
CSS Grid Generator
Visually build CSS Grid layouts — set columns, rows and gaps, see a live preview, and copy production-ready grid-template CSS.
CSS Spring Physics Generator
Generate natural CSS spring animations from stiffness, damping, mass, and velocity. Analytical damped-harmonic solution with settle-time estimation and cubic-bezier approximation.
Cubic Bezier / Easing Generator
Build a CSS cubic-bezier() timing function visually — drag control points, preview common presets, see the easing curve live, and copy the transition-timing-function CSS.
Dummy Avatar Generator
Generate unique SVG avatars for mockups and placeholders using various illustration styles