How border-radius shorthand works
One value rounds all four corners. Two values are top-left/bottom-right then top-right/bottom-left. Four values run clockwise from top-left. The generator emits the one-value form when all corners match and the four-value form when they differ, so the output stays as short as your design allows.
Why independent corners help
Asymmetric radii are a cheap way to make UI feel designed: a chat bubble with one square corner, a card with a large top radius and a small bottom, a tab that only rounds where it meets the panel. You can also use the slash syntax — border-radius: 20px / 40px — for elliptical corners, which this generator does not automate but accepts in hand-written CSS.
Practical limits
- Any radius larger than half the element's smaller dimension caps at a pill shape
- Radii do not clip children; add
overflow: hiddenif you need that - Focus rings follow the radius, so keyboard users see the same shape
- Keep 4–8px for dense UI, 16–24px for cards, full pill for chips
Browser support and design systems
Independent corner radii are supported everywhere relevant. In a design system, define radius tokens (sm/md/lg/pill) rather than raw pixels per component — it keeps shapes consistent as the product grows.
Frequently Asked Questions
How do I make a perfect circle?
Set the radius to 50% (or half the width) on a square element. With border-radius the value can exceed the box; browsers clamp it to an ellipse.
Does border-radius affect layout?
No — it is a paint-level change, so it never shifts surrounding content.
Can I animate border-radius?
Yes, it animates smoothly between compatible value counts; keep the same number of values to avoid jumps.
Privacy & Your Data
CSSmith runs entirely in your browser. Whatever you type, paste or upload is processed on your own device and never sent to a server — there is no backend to store it.