← All Tools
Border Radius Preview Formatter🔒 100% local
Visual border-radius tool. Privacy-first, no server uploads, no tracking.
Related Tools
Expands a border-radius shorthand the way the CSS engine does and reports which value lands on which corner. One to four values are accepted in px or %; five values, a unitless number or any other unit is rejected with a message naming the offending token. Output is the shorthand plus an explicit four-value equivalent you can paste into a stylesheet.
How to use it
- Type one to four values separated by spaces, for example 12px or 10px 20px 30px 40px.
- Press Process.
- Read the corner list to see the expansion, then copy whichever CSS line you prefer.
Worked example
12pxbecomesInput: 12px
Expanded (clockwise from top-left):
top-left: 12px
top-right: 12px
bottom-right: 12px
bottom-left: 12px
CSS:
border-radius: 12px;
/* explicit */ border-radius: 12px 12px 12px 12px;Real output, cut after the CSS block; the running tool then adds its shape recipes and preview notes.
10px 20px 30pxbecomesExpanded (clockwise from top-left):
top-left: 10px
top-right: 20px
bottom-right: 30px
bottom-left: 20pxThree values reuse the middle one for bottom-left, as the explicit four-value line shows.
When to use it
- Working out a corner set exported from a design tool that only gave you the shorthand.
- Turning corner values from a mockup into CSS without opening DevTools to test each guess.
- Diagnosing a rounded box that looks lopsided: the expansion list shows which value sits on the wrong corner.
What it does not do
- It formats and expands text only. No box is drawn, so you cannot see the radius; the output even mentions a preview area that this build does not render.
- One value per corner. The two-axis syntax with a slash, such as 10px / 30px, is not accepted.
- Mixing pixels and percentages across corners is legal CSS and passes validation here, but the tool gives no warning that the result is usually unintended.
- Only px and % pass validation; rem, em and calc() are rejected even though CSS accepts them.