CSS Border Radius Generator

Generate compact border-radius CSS with linked corners, units, preview, and copyable output.

Tune corner radii, preview the shape locally, and copy either the shortest matching shorthand value or a full border-radius declaration. The generator runs in your browser and does not upload your values.

How it works

Link all corners copies the top-left radius to every corner while you experiment. Turn it off when you need an asymmetric shape.

Unit switches between px, rem, and %. Percentage radii are based on the dimensions of the element, so the same value can look different on boxes with different widths and heights.

Output controls whether the generated text is only the shorthand value or a complete border-radius declaration. The shorthand is compacted to one, two, three, or four values when opposite corners allow it.

Review generated CSS in your target layout because borders, overflow, and background clipping can affect the final appearance.

Values stay in the browser. Do not paste sensitive design tokens into any web tool unless you trust the device and page context you are using.

References

Keep the flow going

More tools to try

Jump into another Nerdmosis shortcut picked from the toolbox.

Keccak-256 Hash Generator for 64-Character Hex Digests Generate a Keccak-256 hash of a string of text. Word & Character Counter: Count Text Locally Count words, Unicode characters, lines, paragraphs, and estimated reading time locally. MD5 Hash Generator: Create 32-Character Hex Digests Generate an MD5 hash of a string of text. Base65536 Encoder and Decoder for UTF-8 Unicode Text Encode and decode qntm Base65536 text locally in your browser.