What this tool does
CSS Border Radius Generator creates rounded-corner CSS for linked or independent corners.
← All Tools
▢ CSS Border Radius Generator
Generate border-radius CSS with linked or independent corner controls.
Why it is useful
It helps designers and developers quickly tune cards, buttons, images, panels, and asymmetric shapes.
How it works
The browser previews radius changes and outputs CSS values for the selected corner settings.
Best input
Use the approximate size of the real component so the radius feels accurate.
Design tip
Use consistent radii across related components to avoid visual clutter.
Privacy note
Border-radius generation happens locally in your browser.
Important limitation
Large radii can clip content or look different when component sizes change responsively.
Quick answers
Can corners be different?
Yes if independent corner controls are available.
Can I use percentages?
CSS supports percentages, but test responsive behavior carefully.
Common Use Cases
Tune card and button corners
Preview linked corner values before copying a consistent border-radius into a component stylesheet.
Design asymmetric UI shapes
Unlink corners to create pills, badges, callouts, and image masks with intentional uneven rounding.
Document design-token candidates
Copy exact radius values into tickets or token notes after checking how the shape responds at realistic sizes.
CSS Visual Studio workflow
Move between color conversion, palettes, gradients, contrast checks, shadows, radii, buttons, and glassmorphism while keeping generated CSS local to the browser.