Edit Radius

Name

Also known as (comma separated)

Brief definition Corner rounding.

Notes

Tier Core Useful Reference Deleted

Controls schema (JSON array) [ { "id": "radius", "type": "number", "label": "Corner radius", "default": 20, "min": 0, "max": 48, "step": 2 }, { "id": "topOnly", "type": "toggle", "label": "Round top corners only", "default": false }, { "id": "background", "type": "color", "label": "Colour", "default": "#A8E6C1", "presets": [ "#A8E6C1", "#F5C2E0", "#BFD9F2" ] }, { "id": "size", "type": "number", "label": "Size", "default": 100, "min": 60, "max": 140, "step": 10 } ]

Templates (JSON object keyed by format) { "html": "<div class=\"rd-wrap\">\n <div class=\"rd-box\" style=\"width:{{size}}px;height:{{size}}px;background:{{background}};{{#if topOnly}}border-radius:{{radius}}px {{radius}}px 0 0;{{/if}}{{#unless topOnly}}border-radius:{{radius}}px;{{/unless}}\"></div>\n <p class=\"rd-caption\">border-radius: {{radius}}px{{#if topOnly}} (top corners only){{/if}}</p>\n</div>\n<style>\n.rd-wrap { font: 13px/1.4 system-ui, sans-serif; color: #241430; width: 260px; }\n.rd-box { box-sizing: border-box; }\n.rd-caption { margin: 12px 0 0; font-size: 12px; color: #241430cc; }\n</style>", "tailwind": "<div class=\"font-sans text-[#241430] w-[260px]\">\n <div class=\"box-border\" style=\"width:{{size}}px;height:{{size}}px;background:{{background}};{{#if topOnly}}border-radius:{{radius}}px {{radius}}px 0 0;{{/if}}{{#unless topOnly}}border-radius:{{radius}}px;{{/unless}}\"></div>\n <p class=\"mt-3 text-xs text-[#241430]/80\">border-radius: {{radius}}px{{#if topOnly}} (top corners only){{/if}}</p>\n</div>", "react": "export function Radius({\n radius = {{radius}},\n topOnly = {{topOnly}},\n background = \"{{background}}\",\n size = {{size}},\n}) {\n return (\n <div style={{ font: \"13px/1.4 system-ui, sans-serif\", color: \"#241430\", width: 260 }}>\n <div style={{ width: size, height: size, background, boxSizing: \"border-box\",\n borderRadius: topOnly ? `${radius}px ${radius}px 0 0` : radius }} />\n <p style={{ marginTop: 12, fontSize: 12, color: \"#241430cc\" }}>border-radius: {radius}px{topOnly ? \" (top corners only)\" : \"\"}</p>\n </div>\n );\n}" }