Developer
CSS Border Radius Generator — Rounded Corners & Custom Shapes
Control all 4 corners individually or use presets (circle, pill, blob). See live preview and get CSS border-radius code and Tailwind rounded-* classes.
Individual CornersPresetsLive PreviewFree
Presets
Top Left12px
Top Right12px
Bottom Left12px
Bottom Right12px
CSS
border-radius: 12px;Related Tools
More free utilities you might find useful
Frequently Asked Questions
Quick answers to common questions
How do I control each corner of border-radius separately?+
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.
How do I make a perfect circle with CSS?+
Set border-radius: 50% on an element with equal width and height. With aspect-ratio: 1/1 and border-radius: 50% for responsive circles.
What is the CSS border-radius value for a pill/stadium shape?+
Use border-radius: 9999px. This is clamped to half the shortest dimension, creating perfect pill ends. Tailwind: rounded-full.