Border Radius Generator
Preview and fine-tune CSS border-radius for one or four corners, then copy CSS or Tailwind classes.
This tool runs entirely in your browser. Your input is never uploaded.
Preview
Percent values scale with the card size.
Preview card
This shape uses the border radius above.
border-radius: 16px;rounded-[16px]Radius
Border Radius Generator
Shape a card's corners visually and export the exact code. Choose Uniform to apply one value to every corner, or Four corners to set each corner independently — the preview updates instantly and shows how irregular corners change the silhouette.
Switch between pixels and percent. Percent radii are measured against the preview card's own dimensions, so they scale with the element size in your project. Every control accepts decimals.
The preview card includes a sample button so you can judge how tight or generous the rounding looks on real UI, not just on a plain block.
Export
- CSS declaration:
border-radius: 16px;when all corners match, otherwise the four-value shorthandborder-radius: 16px 24px 8px 4px;. - Tailwind classes:
rounded-[16px]for a uniform radius, or per-corner arbitrary values likerounded-tl-[16px] rounded-tr-[24px] rounded-br-[8px] rounded-bl-[4px]for independent corners.
Your settings are remembered in the browser, and everything runs locally.
Related tools
Gradient Generator
Design CSS gradients with draggable color stops and export CSS, Tailwind, and config.
Open ToolColor Converter
Convert colors, generate palettes, and check WCAG contrast locally.
Open ToolSVG Badge & Placeholder
Create Shields-style SVG badges or placeholder images locally and export them as SVG or PNG.
Open Tool