webdev_border_radius_generator
Generate CSS border-radius code from per-corner pixel values and get optimized declarations, copy-ready snippets, and an HTML preview. Automatically collapses identical corners to the shortest form.
Instructions
CSS Border Radius Generator. Generate CSS border-radius code for rounded corners from four per-corner pixel values and return the optimised declaration plus copy-ready usage snippets and an HTML preview. Collapses identical corners to the shortest form (one value when all equal, two-value when diagonals match, else four values). Use webdev_box_shadow_generator instead for drop/inset shadow effects, webdev_css_gradient_generator for gradient backgrounds, and webdev_css_filter_generator for blur/brightness filter effects. Runs locally on the input you provide: read-only, non-destructive, contacts no external service, and is rate-limited (60 requests/min for anonymous callers). Returns the border-radius CSS string, whether the radius is uniform, an HTML preview snippet, the echoed corner values, and CSS/inline/SCSS/Tailwind/individual-property usage examples.
Input Schema
| Name | Required | Description | Default |
|---|---|---|---|
| borderRadius | Yes | Per-corner radii in pixels; at least one corner is required (empty object returns HTTP 400). Missing corners default to 0. | |
| previewSettings | No | Optional styling for the returned HTML preview snippet only; does not affect the generated CSS. |
Output Schema
| Name | Required | Description | Default |
|---|---|---|---|
| css | No | The optimised border-radius declaration, e.g. "border-radius: 8px;". | |
| isUniform | No | True when all four corners share the same radius. | |
| previewHtml | No | Self-contained HTML snippet rendering a preview box with the generated radius. | |
| borderRadius | No | The corner values echoed back from the request. | |
| usageExamples | No | Keyed copy-ready snippets (css, inline, sass, tailwind, individual); each has a title and code string. |