Border radius generator
Set each corner on its own, read the shorthand as it collapses, and copy it as CSS, a Tailwind arbitrary value or a theme token.
radius.csscss
.card {
border-radius: 24px 4px;
}
usage.tsxtsx
<div class="rounded-[24px_4px]" />
theme.csscss
@theme {
--radius-card: 24px 4px;
}
Questions
How does the shorthand collapse?+
One number when all four corners agree, two when the diagonals do, four otherwise, read clockwise from the top left. The output writes the shortest form that means what you set.
What makes a radius look right?+
Nesting. An inner radius should be the outer one minus the padding between them, or the two curves will not be concentric and the inner box will look squashed into the corner.
Should this be a token?+
If more than one component uses it, yes. A --radius-* entry in @theme gives you a named utility and one place to change the house shape.
Related tools
Box shadow generatorBuild a layered box-shadow the way real interfaces use it, a tight edge under a wide soft lift, then copy it as CSS, a Tailwind class or a theme token.Clip path generatorCut a real photo into a hexagon, circle, chevron or inset, tune the amount, then copy the clip-path as CSS or as a Tailwind arbitrary value.CSS filter playgroundStack blur, brightness, contrast, saturation and the rest over a real photograph, and copy the result as filter, as backdrop-filter or as a Tailwind class.