Overview
What this tool does
border-radius rounds the corners of any HTML element. This generator gives you four sliders, one per corner, with an option to link them all (most cards want symmetric corners) or set each independently for asymmetric shapes like a leaf, a tab, or a speech bubble. Pick px for fixed pixel rounding, or % for proportional rounding that scales with the element's size. Live preview shows exactly how the corners curve. Copy the CSS or Tailwind class straight into your code. 100% client-side, no signup.
How to
Use it in 3 steps
- Drag each corner's slider to set its radius. Keep 'Linked' on if you want all four corners to match.
- Switch the unit to % if you want the rounding to scale with the element's size (50% = full circle / oval).
- Toggle off 'Linked' for independent control. Useful for tabs (rounded top, square bottom), pill buttons (50% sides), or speech bubbles.
- Change the preview color to test how the shape reads against different backgrounds.
- Copy the CSS or Tailwind class at the bottom.
FAQ
Frequently asked questions
▶When should I use % vs px?
px gives the same physical rounding regardless of element size (a 200×100 button with 12px radius looks the same as a 400×200 button with 12px radius). % scales: 50% on a square element makes a circle, 50% on a rectangle makes an oval. Use px for buttons and cards, % for round avatars or full-width pills.
▶What does the CSS shorthand mean?
When all four corners match, CSS uses a single value: `border-radius: 12px`. When they differ, the four-value form lists them in clockwise order starting from top-left: `border-radius: TL TR BR BL`.
▶Why are my % rounded corners not actually rounded?
Probably because the element doesn't have a fixed height. Border-radius % is computed against the element's width/height; if height is auto-determined by content, very small content can make the rounding nearly invisible. Use px for predictable rounding on auto-sized elements.
▶Can I make ellipse-shaped corners (asymmetric per-axis)?
Not in this version. CSS supports per-axis radius (e.g. `border-radius: 30px / 20px` to make horizontally-bigger curves than vertically), useful for organic blob shapes. We may add this if there's demand; for now, the equal per-corner control covers 95% of UI use cases.
▶Is anything sent to a server?
No. CSS is generated as a string in your browser, and the preview is rendered by your browser's own CSS engine.