Border-Radius Generator

CSS Border Radius Generator

Create beautiful rounded corners with live preview and export to any framework

Live Preview

20 20 20 20

Generated Code

Corner Radius

Link all corners

Top Left

Top Right

Bottom Right

Bottom Left

Customization

Box Color

Background

Width (px)

Height (px)

⚡ Shadow Options

Offset X

Offset Y

Blur

Opacity %

Quick Presets

How to Use

Easy to Use Real-time Preview Copy & Export

Sliders

Drag to adjust corners

Link Mode

Sync all corners

Colors

Customize colors

Presets

12 quick shapes

Export

CSS, React, Tailwind

Download

Save code files

Getting Started

Learn the basics of border-radius

Use the sliders or input fields to adjust each corner's radius. Enable "Link all corners" to change all corners simultaneously.

Drag sliders for quick adjustments
Type exact values in input fields
Choose units: px, %, em, rem

Pro Tips

Advanced techniques for better results

Use 50% for perfect circles (equal width/height)
Use % values for responsive designs
Mix corner values for organic shapes
Try rem/em for accessibility

Export Options

Copy code for any framework

CSS - Pure CSS properties
HTML - Inline styled element
React - Component with styles
Tailwind - Utility classes

Copied!