Border Radius Generator

How Border Radius Generator works

Set each corner independently and copy the ready-to-use border-radius CSS. Everything happens inside this page: the tool reads your input, runs the calculation or conversion locally, and hands the result back to you. Nothing is transmitted, because there is no backend to transmit it to.

That design choice is deliberate. Most free tool sites upload your files to a server, process them there, and quietly keep a copy. Toolcin cannot do that — the site is a set of static files. If your connection dropped the moment the page finished loading, every tool would still work.

Four corners, one shorthand

Each corner can have its own radius. The generated declaration uses the standard shorthand order — top-left, top-right, bottom-right, bottom-left — so a value of 24px 24px 0 0 gives a card with a flat bottom.

The preview updates as you drag, which matters more than the numbers: a radius that looks right at 200 px wide looks wrong on a full-width element.

The trick most people miss

The slash syntax gives each corner two radii, one horizontal and one vertical. That is how leaf shapes and asymmetric pills are made: 50% / 20% produces a curve that is much wider than it is tall.

Mixing px and % is legal and useful: a fixed radius on two corners and 50% on the other two gives a shape that stays round at any size on one side and fixed on the other.

Accessibility and clipping

A radius clips the element's background but not always its children. An image inside a rounded container needs its own radius or overflow: hidden on the parent, otherwise the corners show square image content.

Very large radii on focusable elements can clip the focus ring. Check the focus state after rounding, especially on buttons.

Good to know

• Works offline once loaded, including on flights and in locked-down networks.
• No file size limit beyond your device's own memory.
• Free to use, with no account and no usage counter.
• Results are produced locally, so they are not logged or shared with anyone.

Questions