CSS Border Radius Generator
Independent corner radii with copyable CSS.
◜CSS Border Radius Generator
All processing happens locallyWhat this tool does
CSS Border Radius Generator is a border-radius generator for irregular shapes, every palette and snippet is generated instantly in your browser with no network round trip.
Results update as soon as you change a parameter; copy colour values or CSS straight into your project.
How to use it
- Paste or type your content into the input field at the top, or press the sample button to load demo data.
- Adjust the options below the input, such as output format, separators, letter case or precision.
- Press the main button to run the conversion. Results appear instantly in the output panel without a page reload.
- When the result looks right, use the copy button in the corner, or download it as a local file.
Tips and notes
Clean up stray spaces and line breaks before pasting for more accurate results.
FAQ
Percentages scale with the element, ideal for ellipses and fluid shapes; pixels are fixed and better for standard cards.
Yes, set all four corners to 50%.
Yes. The tool is completely free with no usage limits, and you never need an account or a sign-in.
No. All processing runs locally in your browser, so the input never reaches a server and is never logged or stored.
Yes. The layout is mobile-first, so inputs and buttons stay comfortable on phones and tablets in both orientations.
Yes. A copy button in the output panel puts the result on your clipboard, and you can also download it as a text file.