ADVERT
Border Radius Generator
Tune each corner radius visually and copy the CSS value. Runs in your browser with no sign-up required. Keeps your data private on-device.
How to use this tool
- Adjust each corner radius with sliders or enable linked mode for all corners.
- Preview shape changes in real time.
- Copy the generated `border-radius` declaration into your stylesheet.
Design workflows
- Prototype asymmetrical corners for cards, badges, and buttons.
- Use linked mode to mirror shared design-token radii quickly.
- Experiment with large values to test pill and capsule styles.
Implementation tips
- Reset between experiments to avoid carrying prior corner values.
- Pair radius output with border/shadow tuning for cohesive depth.
- For responsive pills, percentage radii may scale better than fixed pixels.
FAQ
- What does linked mode do?
- It updates all four corners together using a single slider change.
- Can I set each corner independently?
- Yes. Disable linked mode to control each corner separately.
- Is output copy-ready CSS?
- Yes. The tool outputs a direct `border-radius` declaration.
ADVERT
ADVERT