Control all 4 corners individually or use presets (circle, pill, blob). See live preview and get CSS border-radius code and Tailwind rounded-* classes.
More free utilities you might find useful
Quick answers to common questions
border-radius shorthand: border-radius: TL TR BR BL (clockwise). Or use border-top-left-radius etc. Each corner also supports two values for elliptical corners.
Set border-radius: 50% on an element with equal width and height. With aspect-ratio: 1/1 and border-radius: 50% for responsive circles.
Use border-radius: 9999px. This is clamped to half the shortest dimension, creating perfect pill ends. Tailwind: rounded-full.
Your data is processed entirely in your browser. Nothing is sent to any server.
Presets
CSS
border-radius: 12px;Tailwind
rounded-xl