| name | border-craft |
| description | Border design patterns, dividers, separators, and using borders as primary design elements. |
| triggers | ["borders","dividers","separators","border design"] |
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
--radius-none: 0px;
--radius-sm: 4px;
--radius-md: 8px;
--radius-lg: 12px;
--radius-xl: 16px;
--radius-full: 9999px;