A CSS border radius generator builds the perfect border-radius value for any rounded shape. Most designers know border-radius: 8px, but the property has 8 separate values you can tweak — enough to draw pills, asymmetric cards, leaf shapes, and organic blobs.
This guide covers all four corners, the slash syntax for ellipse radii, and how to design custom blob shapes for hero sections.
Generate Border Radius CSS — Free
Live preview, all corners, blob shapes. Copy CSS in one click.
Border Radius Syntax
The full syntax has up to 8 values: 4 horizontal radii, slash, 4 vertical radii.
border-radius: TL TR BR BL / TL TR BR BL;| Shorthand | Meaning |
|---|---|
| 10px | All four corners 10px |
| 10px 20px | TL/BR = 10px, TR/BL = 20px |
| 10px 20px 30px | TL = 10, TR/BL = 20, BR = 30 |
| 10px 20px 30px 40px | TL, TR, BR, BL clockwise |
| 50% 30% / 30% 50% | Ellipse: horizontal/vertical radii different |
Common Shapes
| Shape | CSS |
|---|---|
| Card | border-radius: 12px; |
| Button | border-radius: 8px; |
| Pill | border-radius: 9999px; |
| Circle (square box) | border-radius: 50%; |
| Leaf | border-radius: 0 100% 0 100%; |
| Egg | border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; |
| Squircle | border-radius: 30%; |
| Top-only rounded | border-radius: 12px 12px 0 0; |
Organic Blob Shapes
The slash syntax decouples horizontal and vertical radii, letting you create asymmetric "blob" shapes popular in modern hero sections:
border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;Mix percentages between 20-80% for natural-looking blobs. Animate on hover by transitioning to a different set of values for a morphing effect.
Percent vs. Pixels
- px / rem — Fixed corner size regardless of element dimensions. Good for buttons and cards.
- % — Scales with element size. 50% on a square = circle. 50% on a rectangle = ellipse.
- 9999px or 100vmax — "Fully round" trick for pills; clamps to half the shorter side automatically.
Tips & Gotchas
- If a value is larger than half the shorter side, the browser clamps it (so 9999px = pill).
- Use
overflow: hiddenon parents if children with images break the rounded shape. - For animations, transition the
border-radiusproperty — works smoothly between values. - Mobile Safari needs
-webkit-mask-imagetricks for some advanced shapes.
How to Use the Tool (Step by Step)
- 1
Pick Shape Mode
Symmetric, per-corner, or organic blob.
- 2
Drag Sliders
Adjust each corner radius live.
- 3
Preview
See the shape update in real-time.
- 4
Copy CSS
Grab the generated rule.
- 5
Paste Into Your Code
Apply to any element.
Frequently Asked Questions
What's the maximum border-radius?+−
Any value works, but anything over 50% on a square (or 9999px on rectangles) produces the same fully-rounded shape.
Can I have different corners?+−
Yes — provide up to 4 values clockwise from top-left, or use the longhand properties like border-top-left-radius.
How do I animate border-radius?+−
Transition the property. Works smoothly between values: transition: border-radius 0.3s ease.
Why does my image break out of rounded corners?+−
Add overflow: hidden to the rounded parent, or apply border-radius to the image too.
Is border-radius supported everywhere?+−
Yes — supported in every browser since ~2010. No prefixes needed.
Generate Border Radius CSS — Free
Live preview, all corners, blob shapes. Copy CSS in one click.
Open Border Radius Generator ->Related Guides
CSS Gradient Generator
Generate linear, radial, and conic CSS gradients visually — copy the code and use it instantly in your projects.
CSS Flexbox Generator Guide
Build CSS Flexbox layouts visually. Understand flex-direction, justify-content, align-items, flex-wrap, gap, and responsive patterns with live preview.
CSS Grid Generator Guide
Build CSS Grid layouts visually with rows, columns, gaps, and named areas. Understand grid-template, fr units, auto-fill, and responsive grid patterns.