Design tool
Border Radius Preview
Shape each corner of a box with live CSS output.
CSS border radius
border-radius: 8px 16px 24px 32px;
How the border radius preview works
Preview independent corner radii and copy the resulting CSS border-radius declaration.
Values 8, 16, 24, and 32 produce border-radius: 8px 16px 24px 32px.
Assumptions and limitations
Values are clamped to zero or greater; the browser resolves radii that exceed the box dimensions.
Inputs and results stay in your browser. Blank, invalid, or mathematically undefined inputs show a clean placeholder instead of a broken number.
Practical use
Use this design tool to explore scenarios quickly, then verify important decisions against the original source data or requirements.
Frequently asked questions
Does the border radius preview send my data anywhere?
No. It runs client-side in your browser and makes no network requests.
Why is the result blank or shown as a dash?
One or more inputs are blank, outside the accepted range, or would make the calculation undefined. Check the labels and enter finite values.
Can I use decimal values?
Yes, where decimals are meaningful. Counts that represent whole items may require integers.