Border Radius Visualizer
Drag four sliders to round each corner, switch between px and percent, and copy the border-radius CSS. The preview updates as you type, all in your browser.
About the Border Radius Visualizer
The Border Radius Visualizer lets you round each corner of a box with four sliders and read the matching CSS as you go. Set all corners together with the link toggle, or unlink them to control each corner on its own. Switch the unit between px and percent, watch the live preview, and copy the border-radius value into your stylesheet. It runs in your browser, so nothing you do is sent anywhere.
How it works
- Drag a corner slider or type a number into its box to set the radius for that corner.
- Keep Link all corners on to move every corner together, or turn it off to set each corner on its own.
- Pick px or percent from the unit select; percent rounds based on the box size and caps at 50.
- Read the live preview, then click Copy CSS to grab the border-radius value.
Features
- Four corner sliders with matching number inputs for exact values.
- Link toggle to set all corners at once or control them one by one.
- Unit select for px or percent, with values clamped to a valid range.
- Live preview box that updates as you change any slider.
- Shorthand border-radius output in a mono box with one-click copy.
Frequently asked questions
What does the link toggle do?
When Link all corners is on, changing any slider sets all four corners to the same value. Turn it off to set each corner on its own, which gives you shapes like a card with two rounded top corners.
When should I use percent instead of px?
Percent rounds the corner based on the box width and height, so the shape scales with the element. A value of 50 percent on all corners turns a square into a circle and a rectangle into a pill. Use px when you want a fixed radius that stays the same at any size.
Why is the output sometimes one value and sometimes four?
When all four corners match, the tool prints a single value, since border-radius applies it to every corner. When the corners differ, it prints all four in the CSS order: top-left, top-right, bottom-right, bottom-left.
Is anything sent to a server?
No. The sliders set CSS values and update the preview in your browser. Nothing is uploaded, stored, or logged.
Why does percent stop at 50?
Past 50 percent the corners on one side overlap, so the shape stops changing. The tool caps percent at 50 to keep the slider range meaningful. For px you can go up to 100.