26 CSS Dividers

The HTML Living Standard defines three valid patterns for section dividers, each with its own semantic and accessibility profile. (1) <hr> — the semantic default. The <hr> element represents a paragraph-level thematic break — a topic shift between adjacent content. Screen readers (VoiceOver / NVDA / JAWS / TalkBack) announce it as 'horizontal separator' or 'separator', which gives blind users the same navigational cue sighted users get from the visual rule. Use <hr> for editorial article section breaks, documentation topic transitions, and any thematic content boundary. The element accepts custom styling — the browser's default 1px gray line can be replaced with any CSS you want (gradient, SVG, decorative pseudo-elements) via hr { border: 0; height: auto; ... }. (2) <div role='separator'> — for non-thematic UI dividers. Use when the divider marks a UI region boundary (between navigation groups, between form sections, between toolbar buttons) rather than a content-topic shift. The aria-orientation='horizontal' or 'vertical' attribute tells assistive tech which axis the separator runs on. This is the correct pattern for the vertical divider between navigation links (Demo 25) — a horizontal <hr> rotated 90° would confuse screen readers. (3) Purely decorative dividers get aria-hidden='true'. An animated pulse of dots between article sections, a bouncing loader dot divider, or a decorative flourish that repeats every paragraph adds visual rhythm but zero semantic value — screen readers should skip them. Set aria-hidden='true' and never rely on ARIA labels for purely-visual noise. Every demo in this collection follows one of these three patterns based on its intended use. The Docusaurus / Mintlify / Nextra callout / admonition pattern (used inline in documentation) is a fourth adjacent case: for those, use <aside role='note'> not <hr>, because the callout groups content rather than separates it.

Demo 01 (SVG Wave Section Divider CSS) ships the canonical recipe every tier-1 SaaS marketing site uses. The recipe stacks three components. (1) The wave SVG: an inline <svg> with a <path> that traces the wave shape using cubic-bezier curves. Coordinates run from viewBox='0 0 1440 120' so the wave stretches to any container width. The path starts at the top-left corner, curves along the bottom of the previous section, then closes back to the top-right and top-left corners to fill the enclosed shape. (2) Full-width container: wrap the SVG in a <div> that spans 100% of the viewport (never constrained by a max-width wrapper). The wave must reach edge-to-edge or the visual illusion breaks — a wave that stops short of the viewport reads as a design bug. (3) preserveAspectRatio='none': without this attribute the wave keeps its natural 1440×120 aspect ratio and shows blank space above/below at wider or narrower viewports. Setting preserveAspectRatio='none' stretches the wave horizontally to any width while keeping its vertical proportion — the pattern Stripe / Linear / Vercel / Notion / Framer / Superhuman all ship. The color-match trap: the wave's fill color must match the NEXT section's background exactly. If your hero is dark navy and the next section is white, the wave fill is white — the wave visually 'is' the transition into the white section. Getting the color one shade off reads as a broken alpha mask. Use CSS custom properties so the wave color derives from the same token as the next section's background: fill: var(--section-below-bg). Alternatives: the shape can be a diagonal (Demo 02), a curved arch (Demo 05), a torn paper (Demo 06), or an organic blob (Demo 07) — every one uses the same three-component pattern with the shape SVG swapped. Compositor-safe: SVG paths render on the compositor thread and don't trigger layout, so a wave divider adds ~0.5ms to LCP + 0 CLS + 0 INP tax. Compare to shipping Aceternity UI section-divider components (~40KB React runtime + Framer Motion peer dep at ~40KB gzipped) or gsap DrawSVG (~30KB + $99/yr Club GreenSock license) — the pure-SVG approach in Demo 01 is 0KB, INP-safe, and stays crisp at any viewport width.

Demo 02 (Diagonal Slanted Section Divider CSS) covers this pattern. Three viable techniques, each with real trade-offs. (1) clip-path polygon (the recommended default). clip-path: polygon(0 0, 100% 0, 100% 88%, 0 100%) — the section is clipped to a trapezoid shape, creating a diagonal bottom edge. Compositor-safe, works down to Chrome 55 / Safari 13.1 / Firefox 81 (Baseline since 2020). Zero JavaScript. Every tier-1 SaaS marketing site with a diagonal hero (Airbnb, Notion, Slack landing) uses this pattern. Trap: elements positioned near the clipped edge get cut off — never place important CTAs or images in the clipped triangle area. Use padding-bottom to reserve safe space below content. (2) transform: skewY. Skew a child divider element by 3-6 degrees to create the diagonal line. Works but requires unskewing every child element inside (transform: skewY(-4deg) on grandchildren) — messy and easy to break. Only use when you need actual skewed CONTENT inside the diagonal area (rare). (3) SVG polygon. An inline <svg> with a <polygon> that defines the diagonal shape. Most control (curved diagonals, multi-point shapes, animated stroke) but higher DOM cost than clip-path. Use when the diagonal needs animation (draw-in on scroll, pulse, color shift). Which to use when: clip-path polygon for 90% of diagonal sections. transform:skewY only when the diagonal contains skewed CONTENT. SVG polygon when the diagonal needs to be animated. All three are compositor-safe if you avoid layout properties. The color-match rule: same as the SVG wave — the diagonal edge must match the next section's background exactly, or the illusion breaks. If your hero uses background: linear-gradient(...), the transition into a white next-section works better with an SVG wave/polygon than clip-path (because clip-path clips the gradient at an arbitrary point, sometimes producing visible color banding). The 44px rule stays: the diagonal's visible area shouldn't push interactive elements below their WCAG 2.5.5 44×44 hit-target requirement — verify at 320px viewport that no button gets clipped or squeezed.

The plain browser default for <hr> is a 1px gray line. Every tier-1 editorial site and dev blog restyles it to match their brand. Demo 03 (Gradient Horizontal Rule CSS) ships the canonical recipe. Three components. (1) Reset the browser default: hr { border: 0; height: auto; margin: 0; }. The border attribute is what the browser uses to draw the gray line — remove it, then set your own height and margin. (2) Apply the gradient: height: 2px; background: linear-gradient(90deg, transparent 0%, var(--accent) 50%, transparent 100%);. The transparent-to-accent-to-transparent gradient gives the classic 'fade-in fade-out' editorial rule — the most-copied hr pattern on Medium, Substack, The Atlantic, NYT longform, Vox, The Verge, and every SaaS blog. (3) Space it right: margin: 2.5rem auto; width: min(280px, 100%);. The narrower-than-content-width rule reads as a deliberate design choice; a full-bleed hr reads as accidental. 2.5rem margin gives breathing room without disrupting reading flow. Variants: multi-color gradient (linear-gradient(90deg, #ff6b6b, #f9ca24, #4ecdc4)) for playful blogs, animated gradient with background-size: 300% 100%; animation: shift 4s infinite for premium marketing pages, radial gradient dot with background: radial-gradient(circle, var(--accent) 0%, transparent 40%); height: 8px for a subtle dot-in-the-middle break. The Tailwind Typography plugin ships prose hr styling out of the box but ships as a coupled ~15KB Typography bundle you can't cherry-pick. If you already use @tailwindcss/typography, override with hr:where(.prose *) { background: var(--accent-gradient); }. Otherwise the vanilla CSS in Demo 03 is 4 lines and works in every framework. Semantic bonus: keep the <hr> element (not a <div>) so screen readers still announce the thematic break correctly.

Demo 08 (Pure CSS Ornamental Divider with Pseudo-Elements) and Demo 09 (Editorial Article Serif Divider) both cover editorial section-break patterns. For documentation callouts specifically (Info / Warning / Tip / Note), the cleaner pattern is a themed <aside role='note'> block rather than an hr divider — see the sibling CSS Blockquotes Demo 03 (Pure CSS Callout Box / Admonition) for the full callout recipe. Documentation frameworks distinguish between two concepts: section dividers (mark topic transitions between documentation sections — use <hr> with a decorative style like Demo 03 gradient or Demo 08 ornamental) and callouts (highlight important information within a section — use <aside role='note'> with a colored left border + icon). Both patterns coexist on Docusaurus / Mintlify / Nextra / VitePress / Starlight / Fumadocs pages. For dividers between doc sections, the Demo 03 gradient HR reads clean and matches the Docusaurus default aesthetic. For a stronger visual break between major topics, the Demo 09 editorial serif divider (with a decorative fleuron ❦ centered on a thin line) gives print-magazine gravitas — the pattern Stripe Docs, Vercel Docs, Cloudflare Docs, and Docker Docs all use for chapter breaks. Tier-1 CPM lift: dev-tools docs $8-15 CPM (Docusaurus / Mintlify / Nextra / VitePress / Starlight / Fumadocs), enterprise SaaS docs $15-25 CPM (Salesforce Trailhead / AWS / GCP / Azure). Both callouts AND section dividers are must-have UI primitives — shipping both patterns from this collection + css-blockquotes gives you the complete documentation-page toolkit.

Dividers are one of the highest-density signal-per-pixel UI patterns because they encode brand + content-boundary + information hierarchy in a compact visual unit. Six demos map directly to very-high-CPM verticals. Demo 01 (SVG Wave Section Divider) is the SaaS landing hero-to-section transition pattern used by Stripe (stripe.com), Linear (linear.app), Vercel (vercel.com), Notion (notion.so), Framer (framer.com), Superhuman (superhuman.com), and every tier-1 SaaS marketing site — SaaS marketing CPM $8-25, luxury dev-tools tier $15-25. Demo 02 (Diagonal Slanted Section Divider) is the Airbnb / Notion / Slack landing hero pattern — travel-tech CPM $15-30, SaaS marketing $8-25. Demo 05 (Curved Arch Section Divider) is the modern SaaS marketing landing hero pattern with concave and convex variants — SaaS marketing CPM $8-25, premium dev-tools $15-25. Demo 14 (Luxury Minimalist Gold Accent HR) is the high-fashion e-comm pattern — Ssense, Farfetch, MatchesFashion, Net-a-Porter, Nordstrom, Mytheresa, Neiman Marcus — luxury fashion e-comm CPM $15-30 with premium-tier categories (watches, jewelry, handbags) hitting $30-50. Demo 15 (Data Dashboard Dotted Grid Divider) is the SaaS admin dashboard pattern — Vercel Dashboard, Linear, Notion, Airtable, Retool, Metabase, Datadog, Grafana — SaaS admin CPM $8-25 with premium tiers hitting $30-45 (fintech dashboards like Coinbase Prime / Ramp / Brex). Demo 16 (Wedding Heart Icon Divider) is the wedding-planning + gift-registry pattern — Zola, The Knot, WeddingWire, David's Bridal, Vera Wang, Kleinfeld — wedding CPM $15-40 (one of the highest-CPM verticals in consumer e-comm because average transaction values run $2-50K per couple). Bonus verticals: podcast platforms use audio waveform dividers (Demo 23, $10-20 CPM), holiday/promo campaigns use confetti/sparkle dividers (Demo 24, $5-15 CPM with holiday-season spikes), personal blogs use hand-drawn doodle dividers (Demo 26, $2-8 CPM), print-style journalism uses newspaper rule dividers (Demo 21, $3-10 CPM). Every one of these high-CPM verticals rewards the semantic HTML (real <hr> + role='separator') + WCAG 2.2 AA accessibility + zero-dependency freshness this collection ships because enterprise procurement AND ad-quality-score algorithms both reward accessible, INP-safe UI.

Every divider is plain HTML + CSS with zero build dependencies, zero framework lock-in, and zero peer requirements. To port to React / Next.js App Router: rename class to className, drop the JSX into any server or client component. The 22 Pure CSS demos need NO 'use client' directive — they're static SSR-safe HTML that works with JavaScript disabled. Only the 4 Light-JS demos need client-side hydration, each under 30 lines of vanilla JavaScript. Vue 3 / Nuxt 3: accepts as-is. Svelte / SvelteKit: accepts as-is; wrap in a .svelte component for scoped styles. Astro: drop into any .astro component (this site is Astro; every demo renders SSR here). Remix / Solid.js / Qwik / Lit: accepts as-is. Compared to framework-specific divider primitives: shadcn/ui Separator ships a thin wrapper on Radix Separator (~2KB Radix + React 18+ peer dep) that gives you role='separator' + aria-orientation handling for free — but you still write all 26 visual designs yourself on top of it. @radix-ui/react-separator is the same ~2KB primitive; provides accessibility but no visual style. @mui/material Divider ships as part of Material UI's ~85KB base bundle + Emotion runtime — locks you into MUI theming. @chakra-ui/react Divider requires Chakra's ~50KB Emotion runtime + full theme provider. Ant Design Divider is part of AntD's ~200KB base bundle. Tailwind Typography plugin (@tailwindcss/typography) ships prose hr styling out of the box but adds ~15KB to your Tailwind bundle and every prose style is coupled — you can't cherry-pick just the hr. The 26 dividers in this collection total 1-4KB gzipped per demo when you cherry-pick — an entire divider system for less than a single Radix primitive. The .div-NN numeric-prefix scoping means all 26 patterns coexist on the gallery page without a single class collision, and the same prefix guarantees you can drop any demo into a codebase that already uses .divider, .separator, .hr, or .rule classes without renaming a single selector. MIT licensed, no attribution required, no signup, no build step.

Every demo in this collection meets WCAG 2.2 AA out of the box, but here's the full checklist so you can audit any divider you build. The five non-negotiables enforced across all 26 demos. (1) Semantic HTML per WCAG 1.3.1 Info and Relationships. Use <hr> for thematic content breaks (screen readers announce it as 'separator'). Use <div role='separator' aria-orientation='horizontal|vertical'> for non-thematic UI dividers (nav-group separators, toolbar separators, filter-section separators). Purely decorative dividers (animated flourishes, repeated visual rhythm) get aria-hidden='true'. Never use a <div> where an <hr> is semantically appropriate — you lose the free screen-reader announcement. (2) Contrast per WCAG 1.4.3 and 1.4.11. A divider that's too faint to see fails accessibility. Divider line ≥ 3:1 contrast against background per WCAG 1.4.11 Non-text Contrast — measure with axe DevTools or Chrome DevTools contrast checker. Never rely on pure gray-on-gray (#e0e0e0 on #f5f5f5 fails). This collection's demos use oklch() perceptual color so contrast stays predictable across light/dark themes. (3) Reduced motion per WCAG 2.3.3. Every animated divider (bouncing dots Demo 22, audio waveform Demo 23, cyberpunk neon pulse Demo 13, animated gradient border, confetti Demo 24) wraps its animation in @media (prefers-reduced-motion: reduce) { .div-NN * { animation: none !important; transition-duration: 0.01ms !important; }}. This is a legal-enforcement requirement in the EU EAA (took effect June 28, 2025 with €5M per country max fines) and Section 508. (4) Focus visible per WCAG 2.4.13 — only relevant if the divider itself is interactive (rare, but Demo 22's bouncing dots could be wired to jump-to-section anchors). If interactive, ship :focus-visible outline at 2px minimum, 3:1 contrast against surrounding surface. Never outline: none without visible replacement. (5) Never rely on color alone per WCAG 1.4.1 Use of Color. A divider that ONLY communicates state through color (a green divider for 'active section', red for 'blocked') fails colorblind users. Add shape / icon / text distinction. This mostly matters for callout dividers (Info / Warning / Tip / Note) where the color-only version fails colorblind users — pair color with an icon (ⓘ ⚠ 💡 📝) per WCAG 1.4.1 AA. Legal enforcement in tier-1 markets: US ADA Title III lawsuits hit ~4000/year since 2019 (Domino's v. Robles precedent at $50K per site). Section 508 makes AA the federal-contract floor. EU EAA €5M per country max fines. Canada ACA, Australia DDA, UK Equality Act 2010 all interpret 'reasonable accommodation' as WCAG 2.1/2.2 AA. Every divider in this collection ships pattern-compliant so you never rebuild for an audit.