26 CSS Dividers
17 / 26

All 26 in 26 CSS Dividers

  1. 01SVG Wave Section Divider CSS
  2. 02Diagonal Slanted Section Divider CSS
  3. 03Gradient Horizontal Rule CSS
  4. 04Text with Lines on Sides Divider CSS ("OR" Divider)
  5. 05Curved Arch Section Divider CSS
  6. 06Zigzag Torn Paper Cut Divider CSS
  7. 07Blob Organic SVG Divider CSS
  8. 08Pure CSS Ornamental Divider with Pseudo-Elements
  9. 09Editorial Article Serif Divider CSS
  10. 10Neo-Brutalist Heavy Border Divider CSS
  11. 11Art Deco Geometric Gold Divider CSS
  12. 12Organic Leaf & Vine SVG Divider CSS
  13. 13Cyberpunk Neon Glow Divider CSS
  14. 14Luxury Minimalist Gold Accent HR Line CSS
  15. 15Data Dashboard Dotted Grid Divider CSS
  16. 16Wedding Heart Icon Divider CSS
  17. 17Editorial Thin Double-Line Divider CSS
  18. 18Medieval Fantasy Star Crest Divider CSS
  19. 19Subtle Faded Border-Bottom Divider CSS
  20. 208-Bit Retro Pixelated Divider CSS
  21. 21Multi-Column Newspaper Rule Divider CSS
  22. 22Bouncing Animated Dots Divider CSS
  23. 23Audio Waveform SVG Divider CSS
  24. 24Confetti & Sparkle SVG Divider CSS
  25. 25Vertical Flexbox Divider Line CSS
  26. 26Hand-Drawn Doodle SVG Divider CSS
Pure CSSMIT licensed

Editorial Thin Double-Line Divider CSS

The double rule is a typographic device, not just two lines — the classical form pairs a heavy line with a light one, and the order signals whether the break opens or closes a section. This demo shows border-style:double, the two-background alternative that lets you control each weight independently, and the asymmetric "Oxford rule" that magazine art directors actually use.

Live Demo
Try it

Build UI like this from scratch: Flexbox, Grid, animations & responsive CSS

ZTM · The CSS Bootcamp · 30‑day money-back guarantee · Affiliate link

10% off at checkout with code
Check ZTM Course

The code

<section class="div-17" aria-label="Editorial thin double-line divider demo">
  <article class="div-17__stage">
    <p class="div-17__kicker">LOOKBOOK · AUTUMN</p>
    <hr class="div-17__oxford">
    <h2 class="div-17__title">Weight, Gap, Weight</h2>
    <p class="div-17__body">The classical double rule is asymmetric on purpose. Heavy over light opens a section and points the reader downward; light over heavy closes one and lifts the eye back up the column.</p>
    <hr class="div-17__double">
    <p class="div-17__cap">border-style:double — one property, three equal parts, no independent control.</p>
    <hr class="div-17__oxford div-17__oxford--close">
    <p class="div-17__cap">Two background layers — 1px over 3px. The same rule, reversed, closes the section.</p>
    <hr class="div-17__inset">
    <p class="div-17__chip">linear-gradient(c 0 0) idiom · Oxford rule · double needs ≥3px</p>
  </article>
</section>
.div-17 {
  width: 100%;
  min-height: 100vh;
  min-height: 100svh;
  display: block;
  background: var(--div-17-bg);
  --div-17-bg: oklch(0.968 0.005 250);
  --div-17-ink: oklch(0.21 0.014 265);
  --div-17-mut: oklch(0.53 0.016 265);
  --div-17-line: oklch(0.21 0.014 265/.7);
  --div-17-acc: oklch(0.58 0.14 25);
  font-family: Georgia,'Iowan Old Style','Times New Roman',serif;
  color: var(--div-17-ink);
}

.div-17 *,
.div-17 *::before,
.div-17 *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.div-17__stage {
  min-height: 100svh;
  width: min(92vw,60ch);
  margin-inline: auto;
  display: grid;
  align-content: center;
  padding: clamp(30px,6vw,76px) 0;
}

.div-17__kicker {
  font-family: ui-monospace,Menlo,Consolas,monospace;
  font-size: 10.5px;
  letter-spacing: .24em;
  color: var(--div-17-acc);
}

.div-17__oxford {
  border: 0;
  height: 7px;
  margin-block: 14px 22px;
  background: linear-gradient(var(--div-17-line) 0 0) 0 0/100% 3px no-repeat,linear-gradient(var(--div-17-line) 0 0) 0 100%/100% 1px no-repeat;
}

.div-17__oxford--close {
  background: linear-gradient(var(--div-17-line) 0 0) 0 0/100% 1px no-repeat,linear-gradient(var(--div-17-line) 0 0) 0 100%/100% 3px no-repeat;
  margin-block: 26px;
}

.div-17__title {
  font-size: clamp(30px,5.6vw,56px);
  line-height: 1.06;
  letter-spacing: -.022em;
  font-weight: 400;
  margin-bottom: 18px;
  text-wrap: balance;
}

.div-17__body {
  font-size: clamp(16px,2vw,19px);
  line-height: 1.68;
  text-wrap: pretty;
}

.div-17__double {
  border: 0;
  border-top: 3px double var(--div-17-line);
  margin-block: 28px;
}

.div-17__cap {
  font-family: 'Segoe UI',system-ui,sans-serif;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--div-17-mut);
}

.div-17__inset {
  border: 0;
  height: 5px;
  margin-block: 26px 20px;
  background: linear-gradient(var(--div-17-line) 0 0) 0 0/100% 2px no-repeat,linear-gradient(var(--div-17-acc) 0 0) 0 100%/56% 1px no-repeat;
}

.div-17__chip {
  justify-self: start;
  font-family: ui-monospace,Menlo,Consolas,monospace;
  font-size: 11px;
  color: var(--div-17-mut);
  padding: 8px 14px;
  border: 1px solid oklch(0.21 0.014 265/.18);
  border-radius: 99px;
}
Paste this into ChatGPT, Claude, Cursor, or any coding assistant. The block below is pre-framed with everything the AI needs to integrate this demo into your project — markup, styles, scoping notes, and the source URL. Hit Copy and paste straight into your chat.
Here's a working CSS Divider from CodeFronts. Use it as-is or adapt to your framework. All classes are scoped under a unique prefix so the code won't collide with your existing styles. MIT licensed.
Demo: Editorial Thin Double-Line Divider CSS
Source: https://codefronts.com/snippets/css-dividers/fashion-dividers/

The double rule is a typographic device, not just two lines — the classical form pairs a heavy line with a light one, and the order signals whether the break opens or closes a section. This demo shows border-style:double, the two-background alternative that lets you control each weight independently, and the asymmetric "Oxford rule" that magazine art directors actually use.
## HTML
```html
<section class="div-17" aria-label="Editorial thin double-line divider demo">
  <article class="div-17__stage">
    <p class="div-17__kicker">LOOKBOOK · AUTUMN</p>
    <hr class="div-17__oxford">
    <h2 class="div-17__title">Weight, Gap, Weight</h2>
    <p class="div-17__body">The classical double rule is asymmetric on purpose. Heavy over light opens a section and points the reader downward; light over heavy closes one and lifts the eye back up the column.</p>
    <hr class="div-17__double">
    <p class="div-17__cap">border-style:double — one property, three equal parts, no independent control.</p>
    <hr class="div-17__oxford div-17__oxford--close">
    <p class="div-17__cap">Two background layers — 1px over 3px. The same rule, reversed, closes the section.</p>
    <hr class="div-17__inset">
    <p class="div-17__chip">linear-gradient(c 0 0) idiom · Oxford rule · double needs ≥3px</p>
  </article>
</section>
```
## CSS
```css
.div-17 {
  width: 100%;
  min-height: 100vh;
  min-height: 100svh;
  display: block;
  background: var(--div-17-bg);
  --div-17-bg: oklch(0.968 0.005 250);
  --div-17-ink: oklch(0.21 0.014 265);
  --div-17-mut: oklch(0.53 0.016 265);
  --div-17-line: oklch(0.21 0.014 265/.7);
  --div-17-acc: oklch(0.58 0.14 25);
  font-family: Georgia,'Iowan Old Style','Times New Roman',serif;
  color: var(--div-17-ink);
}

.div-17 *,
.div-17 *::before,
.div-17 *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.div-17__stage {
  min-height: 100svh;
  width: min(92vw,60ch);
  margin-inline: auto;
  display: grid;
  align-content: center;
  padding: clamp(30px,6vw,76px) 0;
}

.div-17__kicker {
  font-family: ui-monospace,Menlo,Consolas,monospace;
  font-size: 10.5px;
  letter-spacing: .24em;
  color: var(--div-17-acc);
}

.div-17__oxford {
  border: 0;
  height: 7px;
  margin-block: 14px 22px;
  background: linear-gradient(var(--div-17-line) 0 0) 0 0/100% 3px no-repeat,linear-gradient(var(--div-17-line) 0 0) 0 100%/100% 1px no-repeat;
}

.div-17__oxford--close {
  background: linear-gradient(var(--div-17-line) 0 0) 0 0/100% 1px no-repeat,linear-gradient(var(--div-17-line) 0 0) 0 100%/100% 3px no-repeat;
  margin-block: 26px;
}

.div-17__title {
  font-size: clamp(30px,5.6vw,56px);
  line-height: 1.06;
  letter-spacing: -.022em;
  font-weight: 400;
  margin-bottom: 18px;
  text-wrap: balance;
}

.div-17__body {
  font-size: clamp(16px,2vw,19px);
  line-height: 1.68;
  text-wrap: pretty;
}

.div-17__double {
  border: 0;
  border-top: 3px double var(--div-17-line);
  margin-block: 28px;
}

.div-17__cap {
  font-family: 'Segoe UI',system-ui,sans-serif;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--div-17-mut);
}

.div-17__inset {
  border: 0;
  height: 5px;
  margin-block: 26px 20px;
  background: linear-gradient(var(--div-17-line) 0 0) 0 0/100% 2px no-repeat,linear-gradient(var(--div-17-acc) 0 0) 0 100%/56% 1px no-repeat;
}

.div-17__chip {
  justify-self: start;
  font-family: ui-monospace,Menlo,Consolas,monospace;
  font-size: 11px;
  color: var(--div-17-mut);
  padding: 8px 14px;
  border: 1px solid oklch(0.21 0.014 265/.18);
  border-radius: 99px;
}
```

How this works

The quick way is one property, with a rule most people don't know:

hr{ border:0; border-top:3px double var(--line); }

border-style:double splits the declared width into three parts — line, gap, line — and rounds. Below 3px you get a solid line; at 3px you get 1/1/1; at 7px you get 2/3/2. You can never make the two strokes different weights, and you can never control the gap independently. That is the limitation that sends art directors to the second method.

Two background layers give total control:

.oxford{ height:6px; background:
  linear-gradient(var(--line) 0 0) 0 0/100% 2px no-repeat,
  linear-gradient(var(--line) 0 0) 0 100%/100% 1px no-repeat; }

Now the top stroke is 2px, the bottom is 1px and the gap is whatever height you left between them — the classic Oxford rule. Convention: heavy-over-light opens a section (it points the reader down into the text); light-over-heavy closes one. Getting that direction right is what makes a lookbook page feel edited.

The linear-gradient(colour 0 0) idiom is worth memorising generally: it is the shortest way to write "a solid colour I can size and position like an image".

Make it yours

  • Weights: 2px/1px is editorial; 4px/1px is a masthead; 1px/1px at 5px apart is a quiet section mark for lookbooks.
  • Inset the lighter rule: give the bottom layer 0 100%/62% 1px and it becomes a centred short underline — a favourite in fashion editorial.
  • Colour split: the two layers are independent, so a hairline in ink over a hairline in gold is a one-token change.
  • Vertical Oxford rule between columns: same idiom with /2px 100% and /1px 100% layers positioned left and right.

Gotchas — read before shipping

  • border-top:2px double silently renders SOLID — double needs at least 3px to have three parts to divide. This surprises everyone once.
  • <hr> keeps a default margin and, in some UA stylesheets, a color-driven border. Zero the border before styling or you'll fight the UA rule.
  • Background-layer rules don't collapse margins with neighbouring text the way a border does — set the vertical rhythm explicitly with margin-block.
  • Two rules very close together can shimmer on low-DPI screens. Keep the gap at 3px or more, or use the 2dppx half-pixel trick from the luxury hairline demo.

Browser support

ChromeSafariFirefoxEdge
114+17.5+121+114+

Floor set by oklch(), text-wrap as this demo is written. The core technique itself goes back further — Chrome 111+.

border-style:double and multi-layer backgrounds work back to IE9. The single-colour linear-gradient idiom is universal; only oklch() sets the modern floor.

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →