← All Color Tools
⭕
Border Radius Generator
Visual rounded corners builder
🎨 Border Radius Generator
⭕ Corner Radius
Top Left12px
Top Right12px
Bottom Right12px
Bottom Left12px
✨ Preview
CSS
border-radius: 12px 12px 12px 12px;
❓ Frequently Asked Questions
Common questions about Border Radius Generator
How border radius?▼
Adjust each corner independently. 4 sliders. Get CSS code. Live preview.
Free tool?▼
Yes, 100% free. Independent corners. Asymmetric radii. CSS + Tailwind classes.
Tailwind classes?▼
rounded (4px), rounded-md (6px), rounded-lg (8px), rounded-xl (12px), rounded-2xl (16px), rounded-full (50%).
Asymmetric corners?▼
border-top-left-radius: 20px. CSS: border-radius: 20px 0 20px 0 (TL TR BR BL).
Pill shape?▼
border-radius: 9999px. Or Tailwind: rounded-full. Capsule for buttons, badges.
Circle?▼
Equal width + height + border-radius: 50%. Profile pics, icons. Use rounded-full.
Modern design trend?▼
Generous rounded corners (16-24px). Friendlier feel. Apple-like aesthetic.
Sharp corners?▼
border-radius: 0 = sharp. Industrial, modern minimal. Brutalism design trend.
Per-corner CSS?▼
border-top-left-radius, border-top-right-radius, etc. Or shorthand: border-radius: 10px 20px 30px 40px.
Border radius unit?▼
px (fixed), % (relative to size), rem (relative to root). Use px for consistent UI.