What is Border Radius Generator?
Border Radius Generator lets you visually control the rounding on all four corners of an element and instantly copies the CSS border-radius property. Stop guessing pixel values — drag sliders and see the result live on a preview box.
border-radius is one of the most used CSS properties in modern UI design. Cards, buttons, avatars, inputs — almost every element benefits from controlled corner rounding.
Corner Radius Concepts
Uniform Radius
All four corners share one value. The most common case — e.g. border-radius: 8px for a card.
Per-Corner Control
Each corner has its own value. Great for tab shapes, speech bubbles, or asymmetric cards.
Percentage Values
50% creates a perfect circle from any square element. Values above that become ellipses.
Pill Shape
A very large px value (9999px) forces full rounding on the short axis — the classic pill button.
How to Use Border Radius Generator
Drag the sliders
Use the corner sliders to set the radius for each corner independently or all at once.
See the live preview
The preview box updates in real time showing exactly how your element will look.
Type exact values
Click any value field to type a precise px or % number.
Copy the CSS
Click 'Copy CSS' to get the full border-radius property ready to paste into your stylesheet.
Common Border Radius Patterns
| Pattern | CSS Value | Use Case |
|---|---|---|
| Subtle card | 8px | Content cards, modals |
| Rounded button | 6px | Standard CTAs |
| Pill button | 9999px | Tags, badges, capsule CTAs |
| Circle avatar | 50% | Profile images, icons |
| Tab shape | 8px 8px 0 0 | Navigation tabs |
| Speech bubble | 8px 8px 8px 0 | Chat messages |
Tips & Common Mistakes
Pick a scale and stick to it. Most design systems define 2–3 radius values (e.g. 4px, 8px, 16px). Using the same set everywhere keeps the UI visually consistent.
Don’t mix % and px on the same element unless you understand the elliptical behavior. 50% 8px 50% 8px creates an unexpected shape on most elements.
Large radius on tall elements is not a pill. border-radius: 50px on a 200px-tall card will create rounded sides, not a pill. Use 9999px to guarantee a pill regardless of height.
Related Tools
- Box Shadow Generator — add depth to your rounded elements
- CSS Gradient Generator — fill your shapes with gradient backgrounds
- Color Palette Generator — pick a background color for the preview