Border Radius Generator

Free Online Border Radius Generator – Create Custom CSS Shapes

Design beautiful rounded corners with live preview. Control each corner individually or link them together. Copy ready-to-use CSS instantly.

Hey there! The CSS `border-radius` property is one of the easiest ways to make your UI elements look modern and friendly. Our free Border Radius Generator lets you visually design rounded corners, elliptical shapes, pills, and custom blobs with real-time preview — no more guessing pixel values in code.

Everything runs in your browser — 100% private and no data is sent anywhere.

What You Can Create

• Uniform rounded corners (all sides the same)
• Different radius for each corner
• Pill-shaped buttons (very large radius)
• Circular elements
• Creative organic or elliptical shapes

How to Use the Border Radius Generator

1. Adjust the sliders for Top Left, Top Right, Bottom Left, and Bottom Right corners.
2. Toggle “Link All” to keep all corners the same (most common use case).
3. Watch the live preview update instantly as you move the sliders.
4. Click any preset button for quick inspiration (Square, Rounded, Pill, Circle, etc.).
5. Copy the generated CSS with one click.

Key Features

• Individual control over all four corners
• “Link All” option for uniform rounding
• Live visual preview of the shape
• Handy preset shapes (Square, Pill, Circle, Leaf, Blob, etc.)
• Shows both shorthand and individual corner values
• One-click copy for the final CSS code
• Works perfectly on desktop and mobile

Real Example

Generated CSS (Shorthand):

border-radius: 16px 32px 16px 32px;

Individual Values:

border-top-left-radius: 16px;
border-top-right-radius: 32px;
border-bottom-right-radius: 16px;
border-bottom-left-radius: 32px;

Pro Tips

• Use 999px (or a very large number) to create perfect pill-shaped buttons
• For circular elements, set all corners to 50% or a value equal to half the element’s width/height
• Try different values on opposite corners for interesting organic shapes
• Combine with the Box Shadow Generator for complete card or button designs

Why Designers and Developers Love This Tool

• Forever free with no limits or ads
• Instant live preview
• Easy-to-use individual corner controls
• Clean, copy-paste-ready CSS output
• Works smoothly on desktop and mobile
• 100% private — your designs never leave your browser

Ready to Create Beautiful Rounded Corners?

Stop guessing border-radius values. Design, preview, and copy perfect rounded shapes in seconds.

→ Generate Border Radius Now – Free & Instant