CSS Border Radius Generator
// Generate border-radius with visual preview
border-radius: 20px 20px 20px 20px;
#About CSS Border Radius Generator
Free online CSS border-radius generator. Set individual corner radii with a visual preview and copy the CSS code. This tool runs entirely in your browser — your data is never sent to a server. Just paste your input, get instant results, and copy with one click. No sign-up or installation required.
#FAQ
Can I set different radii for each corner? ▾
Yes, you can independently control the top-left, top-right, bottom-right, and bottom-left border radii.
What units does the border-radius use? ▾
The generator uses pixel (px) values, and you can also toggle percentage (%) mode for elliptical shapes.
</> Embed this tool ▾
Copy this code to embed the tool on your website. Adjust the height to fit your layout.
<iframe src="https://www.browserutils.dev/embed/css-border-radius-generator" width="100%" height="500" frameborder="0" title="CSS Border Radius Generator"></iframe>