# Border Craft

> Border design patterns, dividers, separators, and using borders as primary design elements.

- Skill: `dragoon0x/border-craft` (Agent Skill)
- Install (CLI): `npx skillmds@latest add dragoon0x/border-craft`
- Raw SKILL.md: https://api.skillmd.com/api/skills/dragoon0x/border-craft/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: dragoon0x (https://skillmd.com/u/dragoon0x)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/dragoon0x/border-craft

---


## Border Craft

### Borders as Information
Borders separate, group, contain, and emphasize. They carry meaning:
- **Thin (1px):** Subtle separation, table cells, list dividers
- **Medium (2px):** Emphasis, active states, selected items
- **Thick (3-4px):** Strong emphasis, section dividers, brand accent

### Border Styles
| Style | Use | Avoid |
|-------|-----|-------|
| Solid | Default for everything | N/A |
| Dashed | Drag targets, placeholder areas | Decoration |
| Dotted | Input suggestions, optional boundaries | Heavy use |
| Double | Editorial emphasis, retro/classic feel | UI components |

### Alternatives to Borders
- Background color change
- Spacing/gap increase
- Shadow (creates depth instead of line)
- Indent (hierarchy through position)

### Border Radius Scale
```css
--radius-none: 0px;      /* Sharp, editorial, industrial */
--radius-sm: 4px;        /* Subtle softening */
--radius-md: 8px;        /* Standard UI */
--radius-lg: 12px;       /* Cards, containers */
--radius-xl: 16px;       /* Large components */
--radius-full: 9999px;   /* Pills, avatars */
```