Border Radius Generator

Craft fancy border radii

Horizontal A30%

Horizontal B30%

Vertical A70%

Vertical B30%

CSS

border-radius: 30% 70% 70% 30% / 70% 30% 70% 30%;

Loading tool…

About the Border Radius Generator

Generate fancy border-radius values — from simple per-corner rounding to organic blob shapes using the eight-value slash syntax. Drag sliders, watch the live shape morph, and copy the CSS for cards, avatars, and decorative elements.

How to use

1Choose Organic blob or Per-corner mode.
2Drag sliders until the preview shape looks right.
3Copy the border-radius CSS.

Related Colors & Design tools

Color Picker & Converter Gradient Generator Box Shadow Generator Flexbox Builder Grid Builder Font Pairing Preview

Border Radius Generator is part of DevKit — 100 free, privacy-first tools for developers, students, and everyone, built by Minhazul Ashim. Everything runs in your browser; your data never leaves your machine.