# Border Divider Patterns

> Border usage, divider patterns, and visual separation techniques in UI design.

- Skill: `dragoon0x/border-divider-patterns` (Agent Skill)
- Install (CLI): `npx skillmds@latest add dragoon0x/border-divider-patterns`
- Raw SKILL.md: https://api.skillmd.com/api/skills/dragoon0x/border-divider-patterns/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-divider-patterns

---


# Border Divider Patterns

## Separation Methods

| Method | When | Example |
|--------|------|--------|
| White space | Default, sufficient for most cases | Section gaps |
| Background change | Large sections, obvious grouping | Alternating row colors |
| Border/line | Tight spaces, clear delineation needed | Table rows, list items |
| Shadow | Overlapping elements, elevation | Cards on a surface |
| Color band | Strong visual break, decorative | Section dividers |

## Border Rules
1. **1px is usually enough.** 2px for emphasis only.
2. **Use semantic color tokens.** --color-border-default, --color-border-strong.
3. **Don't border everything.** White space often works better.
4. **Consistent style.** Solid throughout, or dashed for a specific meaning (drag targets, optional areas).
5. **Radius matches the system.** Don't mix sharp and rounded borders.

## Divider Rules
- Full-width dividers for major section breaks.
- Inset dividers (indented from edges) for related list items.
- Vertical dividers sparingly (toolbar groups, split panels).
- Never stack dividers and spacing (use one or the other).