What this tool does
Create a four-corner border-radius declaration. The controls set top-left, top-right, bottom-right and bottom-left radii in that CSS order. Uniform mode synchronizes all corners. Values are clamped to 0–100 pixels and the preview shows the current declaration.
How to use Border Radius Generator
- Prepare the input. Choose uniform or individual corner controls.
- Run or configure the tool. Adjust radii in pixels.
- Check and use the output. Copy the declaration and test it on the actual element.
How this tool works
The controls set top-left, top-right, bottom-right and bottom-left radii in that CSS order. Uniform mode synchronizes all corners. Values are clamped to 0–100 pixels and the preview shows the current declaration.
Worked example
Input: Uniform mode; radius 16
Output: border-radius: 16px 16px 16px 16px;
Limits, assumptions and interpretation
This interface exposes pixel corner radii, not percentage, elliptical slash syntax or arbitrary units.
- The real element’s dimensions can make the browser scale oversized radii.
- Clipping contents/images may also require overflow rules in the destination; this generator only writes border-radius.
Supported inputs and limits
- Uniform mode; radius 16
- This interface exposes pixel corner radii, not percentage, elliptical slash syntax or arbitrary units.
- The real element’s dimensions can make the browser scale oversized radii.
- Clipping contents/images may also require overflow rules in the destination; this generator only writes border-radius.
Frequently asked questions
What does this tool actually do?
The controls set top-left, top-right, bottom-right and bottom-left radii in that CSS order. Uniform mode synchronizes all corners. Values are clamped to 0–100 pixels and the preview shows the current declaration.
What should I check before using the result?
This interface exposes pixel corner radii, not percentage, elliptical slash syntax or arbitrary units. The real element’s dimensions can make the browser scale oversized radii. Clipping contents/images may also require overflow rules in the destination; this generator only writes border-radius.
Is information sent to a server?
Tool inputs are processed in this browser. This product does not use analytics or send your input to an external API. Clicking an external website link still visits that website.