Edit Border

Name

Also known as (comma separated)

Brief definition Edge around an element.

Notes **CSS & Layout Vocabulary:** Edge around an element.

Tier Core Useful Reference Deleted

Controls schema (JSON array) [ { "id": "width", "type": "number", "label": "Border width", "default": 3, "min": 0, "max": 10, "step": 1 }, { "id": "style", "type": "select", "label": "Border style", "default": "solid", "options": [ "solid", "dashed", "dotted" ] }, { "id": "radius", "type": "number", "label": "Corner radius", "default": 10, "min": 0, "max": 32, "step": 2 }, { "id": "color", "type": "color", "label": "Border colour", "default": "#241430", "presets": [ "#241430", "#E8A020", "#A8E6C1", "#F5C2E0" ] } ]

Templates (JSON object keyed by format) { "html": "<div class=\"bd-wrap\">\n <div class=\"bd-box\" style=\"border-width:{{width}}px;border-style:{{style}};border-radius:{{radius}}px;border-color:{{color}};\">box</div>\n <p class=\"bd-caption\">border: {{width}}px {{style}} {{color}} &middot; radius {{radius}}px</p>\n</div>\n<style>\n.bd-wrap { font: 13px/1.4 system-ui, sans-serif; color: #241430; width: 260px; }\n.bd-box { background: #FAF7F2; padding: 24px; text-align: center; font-weight: 700; box-sizing: border-box; }\n.bd-caption { margin: 12px 0 0; font-size: 12px; color: #241430cc; }\n</style>", "tailwind": "<div class=\"font-sans text-[#241430] w-[260px]\">\n <div class=\"bg-[#FAF7F2] p-6 text-center font-bold box-border\" style=\"border-width:{{width}}px;border-style:{{style}};border-radius:{{radius}}px;border-color:{{color}};\">box</div>\n <p class=\"mt-3 text-xs text-[#241430]/80\">border: {{width}}px {{style}} {{color}} &middot; radius {{radius}}px</p>\n</div>", "react": "export function Border({\n width = {{width}},\n style = \"{{style}}\",\n radius = {{radius}},\n color = \"{{color}}\",\n}) {\n return (\n <div style={{ font: \"13px/1.4 system-ui, sans-serif\", color: \"#241430\", width: 260 }}>\n <div style={{ background: \"#FAF7F2\", padding: 24, textAlign: \"center\", fontWeight: 700, boxSizing: \"border-box\",\n borderWidth: width, borderStyle: style, borderRadius: radius, borderColor: color }}>\n box\n </div>\n <p style={{ marginTop: 12, fontSize: 12, color: \"#241430cc\" }}>border: {width}px {style} {color} &middot; radius {radius}px</p>\n </div>\n );\n}" }