How to assemble a 4-corner border-radius value

1. Set each corner

   "Top-left", "Top-right", "Bottom-right", "Bottom-left" each accept pixel values for that corner's radius. The order matches CSS shorthand: starting at top-left and going clockwise.

2. Press Run

   Result is a single `css` field: `<tl>px <tr>px <br>px <bl>px`. Paste as the value of `border-radius:`. If all four values are equal you can shorten to a single number, but the tool always emits the full 4-value form.

3. Asymmetric tricks

   Mismatched corners build common UI shapes: chat bubbles use a single zero corner (e.g. `12 12 12 0`); tabs use two zero bottom corners; pill buttons get a huge value on left+right and 0 on top+bottom — or simpler, set a very large equal value like `9999`.

4. Elliptical radii

   CSS also supports per-corner elliptical radii with `tl-x/tl-y` syntax (`12px/24px`) for asymmetric ellipses. This tool only emits circular (single-value) corners — edit by hand if you need elliptical.