What does this tool do?
This tool lets you build a CSS border-radius value visually by adjusting each corner independently. Sliders control all four corners (top-left, top-right, bottom-right, bottom-left), a live preview updates instantly, and the ready-to-use CSS is one click away from your clipboard.
How to use it
- Adjust the values and options.
- See the result in the live preview.
- Copy the generated CSS/code into your project.
Corners, units, and live preview
Choose px or % units: px gives a fixed rounding, while % produces flexible corners relative to the element's size. With 'Link all corners' enabled, one slider changes every corner together; turn it off to shape each corner independently. The preview box reflects your choices in real time, and the tool automatically outputs the short form 'border-radius: 12px;' when all corners match, or the full four-value syntax when they differ.
Typical use cases
It is ideal for softening buttons, cards, and input fields, creating pill-shaped buttons, or designing cards with a single clipped corner. For example, setting the top-left and bottom-right corners high while leaving the others at zero produces a leaf-like shape. Paste the generated code straight into your stylesheet, so you do your trial-and-error here rather than reloading the browser repeatedly.
Frequently asked questions
What is the difference between px and %?
px is a fixed rounding radius, while % scales with the element's size — so 50% turns a square box into a circle.
How do I shape a single corner on its own?
Uncheck the 'Link all corners' box; each slider then affects only its own corner.
How do I use the generated code?
Click the copy button on the code box and paste the border-radius line into your CSS rule.
Is Border Radius Generator free?
Yes. Border Radius Generator and all 300+ tools on MagmaNex are completely free with no signup or account required.
Is my data safe?
Yes. Everything runs locally in your browser. The data you enter is never sent to a server, stored, or shared.
Does it work on mobile?
Yes. Border Radius Generator works on phones, tablets and desktops — no app download needed.
🔒 Privacy: everything runs in your browser, your data is never sent to a server.