Back to Free Tools
FREE TOOLS
CSS Border Radius Builder
Calculate elliptical radius overlap for an explicit border box.
Typed text and options
border-radius.css, border-radius-report.json
Browser only
Runs locally in your browser. Your files, pasted content and generated output are not uploaded. Reset clears this tool’s working data.
This tool needs JavaScript. If it does not load, refresh the page and try again.
How to use this tool
- Enter the ideal border-box width and height in pixels. Choose px or percent for the corner inputs.
- Enter the horizontal and vertical radii for each of the four corners.
- Select Build elliptical radius CSS and download the declaration plus the exact global overlap factor and used-radius report.
Examples
A 200 by 100 px border box with all eight radius inputs set to 12 px retains a global overlap factor of 1.
Limitations
- Positive width/height and nonnegative radii at most100,000; fixed 18-digit/6-fraction decimals,1MiB combined output and30 seconds.
- This models the declared ideal border box. No scrollbar-specific reduction or measured native used geometry is claimed.
Related tools
No items found.