CSS & Layout

Border Radius Generator

Shape rounded corners visually — drag a slider to round every corner at once, or unlink them to tune each corner on its own. The preview and CSS update instantly, and everything runs in your browser.

Runs in your browser v1.0.0

Corner controls

Uniform

Drag a slider — the preview and CSS update live. Use the small field on the right when you need an exact pixel value.

Live preview

updates as you drag
Preview
Preview options

CSS output


                

How it works

Corners are written in standard CSS border-radius order — top-left, top-right, bottom-right, bottom-left — and shortened to the smallest equivalent shorthand (one, two, three, or four lengths). Values are clamped to 0–200px so the output is always valid. Nothing is sent to a server; the optional share link encodes the corners in the URL fragment, which stays in your browser.