Border Radius Generator API

Build or normalise a CSS border-radius value (including elliptical blob shapes) from a shorthand value or a named preset.

POST /api/v1/tools/border-radius-generatorMCP border_radius_generatorDesign & Colour

Design CSS border-radius visually: set each corner in px, % or rem, make elliptical corners and organic blob shapes, and copy the shortest CSS.

Input

Send these as a JSON object. Unknown fields are rejected.

value: A border-radius value to validate and shorten, e.g. "12px", "10px 20px" or "30% 70% 70% 30% / 30% 30% 70% 70%". All non-zero values must share one unit (px, % or rem). Ignored if preset is set. (string, up to 200 characters)
preset: A named shape instead of value. (string, one of Rounded, Pill, Circle, Leaf, Tab, Blob, Blob 2, Blob 3, Egg, Drop)

Try it in the browser JSON Schema Get an API key

curl https://pithlab.com/api/v1/tools/border-radius-generator \n  -H "Authorization: Bearer $PITHLAB_KEY" \n  -H "Content-Type: application/json" \n  -d '{"value":"30% 70% 70% 30% / 30% 30% 70% 70%"}'

Example response

{
  "ok": true,
  "result": {
    "value": "30% 70% 70% 30% / 30% 30% 70% 70%",
    "css": "border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;",
    "unit": "%",
    "horizontal": [
      30,
      70,
      70,
      30
    ],
    "vertical": [
      30,
      30,
      70,
      70
    ],
    "elliptical": true
  }
}