◈Free
CSS corner radius generator
Generate four independent corner radii with a chosen unit.
Generate four independent corner radii with a chosen unit. Set each corner separately and output border-radius values in clockwise CSS order. Choose pixels or percentages for all four values in the generated declaration.
How to use
- Enter your text, values, or image.
- Adjust the options and run the tool.
- Copy or download your result.
Worked example
Example input
Top left: 10 Top right: 20 Bottom right: 30 Bottom left: 40 Unit: px
Example result
border-radius: 10px 20px 30px 40px;
Limitations and details
The tool generates a single radius per corner, not the slash syntax for elliptical radii; percentage appearance depends on element dimensions.
Inputs and options
- Top left
- Number · Minimum: 0 · Maximum: 1000
- Top right
- Number · Minimum: 0 · Maximum: 1000
- Bottom right
- Number · Minimum: 0 · Maximum: 1000
- Bottom left
- Number · Minimum: 0 · Maximum: 1000
- Unit
- px / %
Frequently asked questions
Is this tool free and private?
Yes. All 300 tools are free in this phase. Processing happens in your browser; your input and files are not sent to our servers.