CSS Border Radius Generator
Generate CSS border-radius visually. Adjust each corner independently or link them together.
Drag the sliders to set border-radius values and copy the generated CSS.
How CSS Border Radius Actually Works
The border-radius property doesn't just round corners — it defines elliptical curves. Each corner gets two radii: horizontal and vertical. When they're equal, you get a perfect circular arc. When they differ, you get an elliptical curve that can create organic, blob-like shapes.
Think of each corner as a quarter of an ellipse tucked into the box. The horizontal radius controls how far the curve extends along the top/bottom edge, while the vertical radius controls how far it extends along the side edge. That's why border-radius: 50% turns a square into a circle — each corner's curve meets the next, creating a continuous ellipse.
This generator lets you set all eight values independently (4 corners × 2 radii), giving you full control over shapes that would be nearly impossible to eyeball in code.
Common Border Radius Patterns
| Pattern | CSS Value | Use Case |
|---|---|---|
| Subtle rounding | 4px or 0.25rem | Input fields, table cells, small cards |
| Standard card | 8px or 0.5rem | Cards, modals, dropdowns |
| Soft card | 12-16px or 0.75-1rem | Modern SaaS cards, app-style UI |
| Pill / chip | 9999px or full | Tags, badges, pill buttons |
| Circle | 50% (on a square) | Avatars, status dots, round buttons |
| Top-only | 12px 12px 0 0 | Card headers, tab bars, sheet handles |
| Organic blob | 30% 70% 70% 30% / 30% 30% 70% 70% | Decorative shapes, backgrounds, avatars |
What this means for you: Most UI elements only need the first three patterns. Save the complex elliptical values for decorative elements where a unique shape adds personality.
The Shorthand Syntax
CSS border-radius shorthand follows the same clockwise pattern as margin and padding — top-left, top-right, bottom-right, bottom-left. The slash separates horizontal radii from vertical radii:
One Value
border-radius: 8px — all four corners, circular arc.
Two Values
border-radius: 8px 0 — top-left/bottom-right get 8px, top-right/bottom-left get 0.
Four Values
border-radius: 8px 4px 12px 0 — each corner set individually, clockwise from top-left.
Elliptical (slash syntax)
border-radius: 50% / 30% — horizontal radii before the slash, vertical radii after. This is how you make organic shapes.
Tailwind CSS Border Radius Classes
| Class | CSS Value | Pixels (default config) |
|---|---|---|
| rounded-sm | 0.125rem | 2px |
| rounded | 0.25rem | 4px |
| rounded-md | 0.375rem | 6px |
| rounded-lg | 0.5rem | 8px |
| rounded-xl | 0.75rem | 12px |
| rounded-2xl | 1rem | 16px |
| rounded-3xl | 1.5rem | 24px |
| rounded-full | 9999px | Pill / circle |
What this means for you: If your project uses Tailwind, grab the pixel value from this generator and pick the closest utility class. For custom values, use arbitrary syntax likerounded-[14px].
Related Tools
CSS Box Shadow Generator
Add depth and elevation to rounded elements.
CSS Gradient Generator
Fill your rounded shapes with smooth colour gradients.
Colour Palette Generator
Create harmonious colour schemes for your UI components.
PX to REM Converter
Convert pixel radius values to responsive rem units.
CSS Beautifier
Clean up your stylesheets after pasting generated CSS.
CSS Minifier
Compress your production CSS for faster page loads.
How to use this tool
Drag the slider to set your border-radius value (or unlink corners for individual control)
Preview the shape live on the blue box above
Click Copy CSS to grab the generated code
Common uses
- Creating rounded card designs for modern UI layouts
- Building circular avatar components with 50% radius
- Generating pill-shaped buttons and tag elements
- Previewing organic blob shapes with asymmetric radii
Share this tool