Visual CSS Border Radius Generator with Presets

Writing border-radius by hand is fine for simple cases. But when you want asymmetric corners or blob shapes, a visual tool is faster.

Features

• 4 corner sliders (or linked for uniform radius)
• Live preview with custom color
• 8 presets: None, Rounded, Pill, Circle, Blob 1, Blob 2, Card, Drop
• One-click copy CSS code
• Shorthand detection — outputs border-radius: 20px instead of 20px 20px 20px 20px

Example outputs

/* Pill shape */
border-radius: 100px;

/* Blob */
border-radius: 30px 70px 30px 70px;

/* Drop */
border-radius: 50px 50px 50px 0px;

Border Radius Generator

More CSS visual tools:

• Gradient Generator
• Box Shadow Generator
• Glassmorphism Generator

Full toolkit: devtools-site-delta.vercel.app