Border radius generator

Sets each corner radius independently and writes the shortest shorthand that means it: four equal corners collapse to one value, a diagonal pair to two, and so on.

The shorthand order is clockwise from the top left — top-left, top-right, bottom-right, bottom-left — and it fills in the same way `margin` does: one value applies to all four, two values set the two diagonals, three set top-left, the pair, and bottom-right. Knowing that is the difference between reading `border-radius: 8px 2px` and guessing at it. Percentages behave differently from pixels in a way that surprises people. A percentage radius is relative to the element’s own width and height **separately**, so on a rectangle it produces an ellipse rather than a circle. `border-radius: 50%` on a square is a circle; on a 200×100 box it is an oval. That is a feature — it is how you draw an ellipse in CSS with no SVG — but it explains why a radius that looked right on one card looks wrong on a wider one. There is also a slash form, `border-radius: 20px / 40px`, which sets horizontal and vertical radii separately for genuinely elliptical corners. It is rarely needed and it is what the browser is really doing behind every value.