Skip to content
TextArray1.87.0
100% local

CSS border-radius generator

Build a border-radius shorthand from per-corner values, with elliptical corners and a Tailwind equivalent.

50
Output
Related tools
CSS box-shadow generatorDeveloper tools
CSS gradient generatorDeveloper tools
CSS grid generatorDeveloper tools
i18n key diffDeveloper tools
TOML to JSON converterDeveloper tools
SQL to JSONDeveloper tools
CSS border-radius generator
Set a radius for every corner and this tool assembles the correct border-radius CSS for you, collapsed to the shortest valid shorthand — one value when all four corners match, two or three when opposite corners repeat, and the full four-value list when every corner is different. It is built for anyone shaping cards, buttons, avatars, modals or input fields who wants clean, copy-pasteable CSS without doing the corner math by hand.
Choose "Same on every corner" for a simple rounded rectangle, or switch to "Separate corners" to dial in each corner independently in px, percent or rem. Turning on elliptical corners adds the eight-value slash notation border-radius supports — a horizontal radius and a distinct vertical radius per corner, driven by one ratio slider so a squircle or a flattened pill shape takes one drag rather than eight fields. The "Random organic blob" option generates a fresh asymmetric shape on every run, the kind of soft, irregular outline used behind hero images and decorative blobs. Switch the output between the border-radius shorthand and the four expanded border-*-radius properties, and turn on the Tailwind option to get the matching arbitrary-value utility class alongside the plain CSS.
Values are validated as you type: negative numbers are treated as zero and there is no state that produces broken CSS. The live tally under the output reports how many declaration lines were generated, how many distinct corner values the shorthand collapsed to, and the exact character count, updating as you adjust any option.
Everything runs locally in your browser — no corner value or generated CSS is ever sent anywhere. Copy the result, download it as a .txt file, or send it straight into another tool's input to keep working on it.
FAQ
How does the shorthand collapsing work?
The tool follows the same rule as border-radius itself: if all four corners match it outputs one value, if opposite corners match it outputs two, and otherwise it lists all four corners in top-left, top-right, bottom-right, bottom-left order.
What does the elliptical option add?
It adds a second, vertical radius for every corner using the CSS slash notation (e.g. 16px / 8px), which lets a corner curve more in one direction than the other — useful for squircles and flattened pill shapes.
What is the random organic blob for?
It generates a fresh, asymmetric border-radius on every run — a quick way to get the soft, irregular outline often used behind hero images, without hand-tuning eight numbers.
Does the Tailwind output match the CSS exactly?
Yes. It is the same corner values expressed as Tailwind arbitrary-value classes — one rounded-[...] utility when all corners match, or four corner-specific rounded-tl-/-tr-/-br-/-bl- classes otherwise.
Is anything I enter sent to a server?
No. The CSS and Tailwind output are generated entirely in your browser; nothing you enter here is uploaded anywhere.