CSS Border Radius Generator

The generator drives a live preview box (default a #3b82f6 200x200px square, resizable from 50 to 300px on each axis in 10px steps) and produces the corresponding `border-radius` declaration in real time. Each of the four corners (top-left, top-right, bottom-right, bottom-left) has its own slider, and a Linked/Unlinked toggle decides whether moving one slider sets all four to the same value or lets you tune them independently for asymmetric shapes. You pick the unit per project: `px` clamps the sliders to a 0-200 range, while `%` clamps them to 0-50, which matches the practical fact that 50% is the largest meaningful percentage radius (each corner radius is half the relevant side, so 50% on a square produces a full circle and on a rectangle an ellipse).

Rather than always emitting four explicit values, the tool collapses the output to the shortest valid CSS shorthand. When all four corners are equal it writes a single value (e.g. `border-radius: 12px;`); when top-left equals bottom-right and top-right equals bottom-left it writes two values; when only top-right equals bottom-left it writes three; otherwise it falls back to the full four-value form in the standard top-left, top-right, bottom-right, bottom-left order. The generated string is shown inside the preview box itself and again in a copy-ready `border-radius: ...;` code block. Note that the output is always single-value-per-corner: this tool does not produce the elliptical slash syntax (`horizontal / vertical`) and does not emit vendor prefixes, so each corner is a quarter-circle/quarter-ellipse, not a freehand curve.

Twelve one-click presets cover the common cases and each carries its own unit: None (0), Subtle (4px), Rounded (12px, the default), Pill (9999px, the large-value trick that fully rounds the short edges of a button), Circle (50%) and Blob (a lopsided 30%/70%/30%/70% in percent), plus directional presets (Top/Bottom/Left/Right Only at 20px) and the two diagonal presets (TL-BR and TR-BL at 40px) that round opposite corners. Applying a preset also re-derives the Linked state automatically, switching to Unlinked when the four corner values differ. The full configuration (corner values, unit, link state, box color, width, and height) is encoded into the URL via debounced query params (`r`, `u`, `l`, `c`, `w`, `h`, written 500ms after you stop adjusting and only for non-default values), and a Share button copies that link (or offers QR code / X / LinkedIn / email) so a specific shape can be reproduced or sent to a teammate.