CSS Border Radius Generator
Visually craft circular and elliptical CSS border-radius for any corner.
Design custom border-radius shapes by tweaking each corner independently. Optionally enable elliptical mode for separate horizontal and vertical radii, producing organic blob and squircle shapes.
Common use cases
- Design organic blob backgrounds for marketing pages
- Create asymmetric chat bubbles and cards
- Produce squircle button shapes (iOS-like)
- Generate elliptical avatar and image masks
Frequently asked questions
What does elliptical border-radius mean?▾
Each corner takes two values — horizontal and vertical radii — separated by a slash, producing an oval rather than circular curve.
Why do my asymmetric corners look weird?▾
When two adjacent corners overlap, browsers shrink them proportionally. Use smaller values or larger box dimensions to avoid clipping.
Can I animate border-radius?▾
Yes — border-radius is animatable in CSS, which is how blob morphing animations are usually built.
Related tools
🎨
Color Picker (HEX/RGB/HSL)
Pick a color and copy it as HEX, RGB, HSL or HSV.
🌈
CSS Gradient Generator
Build linear and radial CSS gradients with live preview.
🎨
Color Palette Generator
Generate harmonious color schemes from a base color.
👁
WCAG Contrast Checker
Check color contrast ratios against WCAG AA/AAA accessibility levels.