paper-edge-dividers

name	paper-edge-dividers
description	Use when separating sections with editorial flair. Paper-edge dividers (subtle torn-edge, dotted line, gradient fade) replace boring solid rules.

Paper-Edge Dividers

Paper-edge dividers signal editorial brand. Torn-edge SVG, dotted custom rule, or gradient fade — never solid 1px line.

Divider styles

1. Torn-edge SVG — custom-drawn ragged edge
2. Dotted rule — border-style: dotted with custom dot spacing
3. Dashed rule — border-style: dashed (less editorial)
4. Gradient fade — line that fades into background
5. Centered ornament — short rule + small icon (◆, ★)
6. Asymmetric rule — line offset from center

CSS implementations

.divider-dotted {
  border-top: 1px dotted var(--ink-30);
  margin: 3em 0;
}
.divider-fade {
  background: linear-gradient(to right, transparent, var(--ink-30), transparent);
  height: 1px;
  margin: 3em 0;
}
.divider-ornament::before {
  content: '◆';
  display: block;
  text-align: center;
  color: var(--accent);
  margin: 2em 0;
  font-size: 1.2em;
}

When to use which

1. Section break (within a page): ornament or fade
2. Article transition: torn-edge SVG
3. List items: dotted rule
4. Sidebar separator: thin gradient
5. Footer/colophon: solid 1px (final, formal)

Where this fits in the X3 empire

Used across CardPrepAI editorial section transitions.