Border Radius Generator
Adjust corner radii visually and copy clean CSS for buttons, cards, and surfaces.
Corner controls
Set each corner independently and preview the final shape.
Radius preview
Use the live shape to judge how soft or sharp the surface feels.
Common use cases
- Testing rounded UI components quickly
- Matching mockups with production CSS
- Creating more intentional surface styles
FAQ
Can I use different values for each corner?
Yes. Each corner is controlled separately so you can create asymmetrical shapes easily.
Does this help with responsive UI work?
Yes. It is a quick way to test how radius changes affect cards, buttons, and panels before shipping CSS.
How it works
Set each corner radius independently, preview the result, and copy the final CSS value in seconds. The result is produced immediately so you can review it before copying or using it elsewhere.
Privacy
The tool is designed to process ordinary input in your browser. Avoid pasting passwords, private keys, access tokens, personal records, or other sensitive production data into any online utility.
Limitations
This utility handles the focused workflow described on this page. Check the result before production use, especially when an input depends on a vendor-specific format, security rule, or external standard.