💻 CSS Border-Radius Generator — Preview Rounded Corners
Adjust the radius for each corner or set them all at once. See the generated CSS property ready to copy.
Input
Result
Private by design. This tool runs entirely in your browser — nothing you enter or add is uploaded to any server.
How it works
- Set a single value for all corners or individual values for each.
- The CSS updates live as you type.
- Copy the generated border-radius declaration to use in your stylesheet.
Examples
- A value of 8px on all corners gives a gently rounded button.
- Different values create pill shapes or irregular rounded rectangles.
- Useful when designing cards, buttons or image frames.
Frequently asked questions
Does this upload anything?
No. Everything runs locally in your browser.
Can I use percentages?
The tool currently outputs pixel values. You can edit the copied CSS to use % or other units.
How do I use the output?
Paste the CSS property into your stylesheet or inline style.
Related tools
More Developer tools →JSON Formatter
Format, beautify and validate JSON with clear error reporting.
Regex Tester
Test regular expressions with live matching and capture group details.
UUID Generator
Generate cryptographically random UUID version 4 identifiers.
Cron Expression Explainer
Turn a five-field cron expression into plain language and upcoming run times.