26 CSS Dividers17 / 26

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.

Published Updated

Live Demo
Try it

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 →