Border Radius Generator
Border Radius Generator — Set each corner radius, preview the rounded box and copy the CSS border-radius declaration. Processing runs in your browser.
Border Radius Generator generates CSS from the controls shown below. Set each corner radius, preview the rounded box and copy the CSS border-radius declaration. Review the output before adding it to your page.
Border Radius Generator is a free CSS Tools utility that runs entirely in your browser — nothing you enter is uploaded.
How to use Border Radius Generator
- Adjust Top-left and Top-right to round the upper corners.
- Set Bottom-right and Bottom-left for the lower corners.
- Review the box preview and generated border-radius declaration.
- Choose Copy and add the declaration to the CSS rule for your element.
About this tool
Each slider sets one corner radius in pixels. The generated shorthand orders the values as top-left, top-right, bottom-right and bottom-left.
The tool generates CSS locally from your chosen settings. It does not parse or modify a pasted stylesheet. Once the page and its scripts have loaded, generation can run without a network connection.
Frequently asked questions
What does Border Radius Generator do?
Set each corner radius, preview the rounded box and copy the CSS border-radius declaration. The controls update the preview and CSS automatically.
Is Border Radius Generator free to use?
The tool is free to use and requires no account or installation. Controls are limited to the ranges and presets shown.
Where are my settings processed?
The tool processes your selected settings in your browser; it does not send those settings to a server for generation. The site privacy and cookie pages describe its separate advertising and analytics services.
How do I apply the generated CSS?
Place the generated border-radius declaration inside the selector for the element you want to round.
Does Border Radius Generator work on mobile?
The controls work in modern desktop and mobile browsers with JavaScript enabled. Test the copied CSS in the browsers and layout you intend to support.