25 CSS Blockquotes07 / 25

CSS onlyMIT licensed

Classic Left Border CSS Blockquote Snippet

The canonical snippet — 4px solid left border, light wash, italic serif — that every CMS, CMS theme and CSS course reaches for first, written the way it should be written in 2026: tokens for every value, a wash derived with color-mix() instead of a hand-picked gray, spec-correct cite placement, and a smart-quotes bonus using the CSS quotes property so nested quotes get language-correct marks automatically. This is the one to teach from: every other demo in the collection is a mutation of these ten lines.

Published Updated

Live Demo
Try it

The code

<section class="bq-07" aria-label="Classic left border blockquote demo">
  <div class="bq-07__stage">
    <article class="bq-07__article">
      <h1>The ten lines everyone starts with</h1>
      <p>Ask a room of developers to style a quote and most will type the same thing from muscle memory. As one CSS textbook puts it:</p>
      <figure class="bq-07__fig">
        <blockquote class="bq-07__quote">
          <p>The left-border blockquote persists because it solves the real problem — <q>where does the quote end?</q> — with one line of CSS and no ambiguity.</p>
        </blockquote>
        <figcaption class="bq-07__cap">Sarah Drasner, <cite>Notes on Modern CSS</cite></figcaption>
      </figure>
      <p>Note the nested <em>inner quote</em> above: it got single marks automatically. That's the <code>quotes</code> property tracking depth — no hard-coded characters anywhere.</p>
    </article>
    <p class="bq-07__chip" aria-hidden="true">quotes · open-quote/close-quote · color-mix() wash</p>
  </div>
</section>
.bq-07,
.bq-07 *,
.bq-07 *::before,
.bq-07 *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.bq-07 {
  width: 100%;
  min-height: 100vh;
  min-height: 100svh;
  display: block;
  --bg: oklch(0.98 0.005 240);
  --ink: oklch(0.26 0.015 250);
  --quiet: oklch(0.44 0.015 250);
  --mut: oklch(0.55 0.015 250);
  --rule: oklch(0.62 0.1 250);
  font-family: 'Segoe UI',system-ui,sans-serif;
  color: var(--ink);
}

.bq-07__stage {
  width: 100%;
  height: 100vh;
  height: 100svh;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 26px;
  padding: clamp(20px,5vw,56px);
  background: var(--bg);
  overflow-y: auto;
}

.bq-07__article {
  max-width: 60ch;
  font-size: 16px;
  line-height: 1.7;
}

.bq-07__article h1 {
  font-size: clamp(22px,3vw,30px);
  letter-spacing: -.02em;
  margin-bottom: 14px;
  text-wrap: balance;
}

.bq-07__article>p {
  color: var(--quiet);
  text-wrap: pretty;
}

.bq-07__article>p+p,
.bq-07__fig+p {
  margin-top: 14px;
}

.bq-07__article code {
  font-family: ui-monospace,Menlo,Consolas,monospace;
  font-size: .86em;
  background: oklch(0.93 0.01 250);
  padding: 1.5px 6px;
  border-radius: 5px;
}

.bq-07__fig {
  margin-block: 1.5em;
}

.bq-07__quote {
  border-left: 4px solid var(--rule);
  background: color-mix(in oklch,var(--rule) 10%,transparent);
  padding: 14px 20px;
  border-radius: 0 10px 10px 0;
  font-family: Georgia,'Times New Roman',serif;
  font-style: italic;
  quotes: '\201C' '\201D' '\2018' '\2019';
}

.bq-07__quote p {
  font-size: 1.05em;
  line-height: 1.65;
  color: var(--quiet);
}

.bq-07__quote p::before {
  content: open-quote;
}

.bq-07__quote p::after {
  content: close-quote;
}

.bq-07__quote q {
  quotes: inherit;
  font-weight: 600;
}

.bq-07__cap {
  margin-top: 8px;
  padding-left: 24px;
  font-size: 13px;
  color: var(--mut);
}

.bq-07__cap cite {
  font-style: italic;
}

.bq-07__chip {
  font-family: ui-monospace,Menlo,Consolas,monospace;
  font-size: 11.5px;
  color: var(--mut);
  padding: 7px 13px;
  border: 1px solid oklch(0 0 0/.1);
  border-radius: 99px;
  background: oklch(1 0 0);
}

@media (prefers-reduced-motion: reduce) {
  .bq-07 * {
    transition-duration: .01ms !important;
  }
}
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 Blockquote 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: Classic Left Border CSS Blockquote Snippet
Source: https://codefronts.com/snippets/css-blockquotes/classic-mark/

The canonical snippet — 4px solid left border, light wash, italic serif — that every CMS, CMS theme and CSS course reaches for first, written the way it should be written in 2026: tokens for every value, a wash derived with color-mix() instead of a hand-picked gray, spec-correct cite placement, and a smart-quotes bonus using the CSS quotes property so nested quotes get language-correct marks automatically. This is the one to teach from: every other demo in the collection is a mutation of these ten lines.
## HTML
```html
<section class="bq-07" aria-label="Classic left border blockquote demo">
  <div class="bq-07__stage">
    <article class="bq-07__article">
      <h1>The ten lines everyone starts with</h1>
      <p>Ask a room of developers to style a quote and most will type the same thing from muscle memory. As one CSS textbook puts it:</p>
      <figure class="bq-07__fig">
        <blockquote class="bq-07__quote">
          <p>The left-border blockquote persists because it solves the real problem — <q>where does the quote end?</q> — with one line of CSS and no ambiguity.</p>
        </blockquote>
        <figcaption class="bq-07__cap">Sarah Drasner, <cite>Notes on Modern CSS</cite></figcaption>
      </figure>
      <p>Note the nested <em>inner quote</em> above: it got single marks automatically. That's the <code>quotes</code> property tracking depth — no hard-coded characters anywhere.</p>
    </article>
    <p class="bq-07__chip" aria-hidden="true">quotes · open-quote/close-quote · color-mix() wash</p>
  </div>
</section>
```
## CSS
```css
.bq-07,
.bq-07 *,
.bq-07 *::before,
.bq-07 *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.bq-07 {
  width: 100%;
  min-height: 100vh;
  min-height: 100svh;
  display: block;
  --bg: oklch(0.98 0.005 240);
  --ink: oklch(0.26 0.015 250);
  --quiet: oklch(0.44 0.015 250);
  --mut: oklch(0.55 0.015 250);
  --rule: oklch(0.62 0.1 250);
  font-family: 'Segoe UI',system-ui,sans-serif;
  color: var(--ink);
}

.bq-07__stage {
  width: 100%;
  height: 100vh;
  height: 100svh;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 26px;
  padding: clamp(20px,5vw,56px);
  background: var(--bg);
  overflow-y: auto;
}

.bq-07__article {
  max-width: 60ch;
  font-size: 16px;
  line-height: 1.7;
}

.bq-07__article h1 {
  font-size: clamp(22px,3vw,30px);
  letter-spacing: -.02em;
  margin-bottom: 14px;
  text-wrap: balance;
}

.bq-07__article>p {
  color: var(--quiet);
  text-wrap: pretty;
}

.bq-07__article>p+p,
.bq-07__fig+p {
  margin-top: 14px;
}

.bq-07__article code {
  font-family: ui-monospace,Menlo,Consolas,monospace;
  font-size: .86em;
  background: oklch(0.93 0.01 250);
  padding: 1.5px 6px;
  border-radius: 5px;
}

.bq-07__fig {
  margin-block: 1.5em;
}

.bq-07__quote {
  border-left: 4px solid var(--rule);
  background: color-mix(in oklch,var(--rule) 10%,transparent);
  padding: 14px 20px;
  border-radius: 0 10px 10px 0;
  font-family: Georgia,'Times New Roman',serif;
  font-style: italic;
  quotes: '\201C' '\201D' '\2018' '\2019';
}

.bq-07__quote p {
  font-size: 1.05em;
  line-height: 1.65;
  color: var(--quiet);
}

.bq-07__quote p::before {
  content: open-quote;
}

.bq-07__quote p::after {
  content: close-quote;
}

.bq-07__quote q {
  quotes: inherit;
  font-weight: 600;
}

.bq-07__cap {
  margin-top: 8px;
  padding-left: 24px;
  font-size: 13px;
  color: var(--mut);
}

.bq-07__cap cite {
  font-style: italic;
}

.bq-07__chip {
  font-family: ui-monospace,Menlo,Consolas,monospace;
  font-size: 11.5px;
  color: var(--mut);
  padding: 7px 13px;
  border: 1px solid oklch(0 0 0/.1);
  border-radius: 99px;
  background: oklch(1 0 0);
}

@media (prefers-reduced-motion: reduce) {
  .bq-07 * {
    transition-duration: .01ms !important;
  }
}
```

How this works

The snippet itself, in its final form — short enough to memorize, structured enough to theme:

blockquote{
  border-left:4px solid var(--rule);
  background:color-mix(in oklch, var(--rule) 10%, transparent);
  padding:14px 20px; margin-block:1.5em;
  border-radius:0 10px 10px 0;
  font-family:Georgia, serif; font-style:italic;
  quotes:'\201C' '\201D' '\2018' '\2019';
}
blockquote p::before{ content:open-quote; }
blockquote p::after{  content:close-quote; }

The under-taught part is the last three lines. The quotes property defines pairs of marks by nesting depth; open-quote/close-quote then insert the right pair AND track depth — quote a quote and the inner one automatically gets single marks. Set lang='fr' on the page and browsers with built-in quote tables switch to « guillemets » without you touching CSS. This is the correct alternative to hard-coding “ characters into your HTML.

The wash color is the other upgrade: color-mix(in oklch, var(--rule) 10%, transparent) means the background is always a 10% tint of whatever the border is — change one token and border + wash stay related. Hand-picked pairs (#ccc border, #f7f7f7 wash) drift apart the first time someone re-themes.

Make it yours

  • House color: set --rule to your brand accent; the wash follows automatically. Gray reads neutral-editorial, brand hue reads owned.
  • No wash: delete the background line for the ultra-classic look (this is the WordPress default vibe); keep the radius 0 in that case.
  • Straight edge: border-radius:0 makes it formal/academic; the 0 10px 10px 0 curve makes it friendly/product-y. This one property is most of the personality.
  • Bigger quotes: for pull-quote duty bump font-size to 1.15em and drop the italic — italics at large sizes get harder to read, not fancier.

Gotchas — read before shipping

  • Per the HTML spec, <cite> names a WORK (a book, a film), not a person — for people, use plain text in a figcaption. The demo shows the compliant markup.
  • open-quote without a quotes property falls back to browser defaults, which are usually right — but define the property anyway so nesting depth is guaranteed.
  • font-style:italic on a serif at 14px is fine; the same italic at 22px+ tires readers — the classic snippet doesn't scale up, which is why pull quotes (demo 11) drop it.
  • margin-block collapses with adjacent paragraph margins — that's good (it's what keeps rhythm), so don't 'fix' it with padding on the article.

Browser support

ChromeSafariFirefoxEdge
114+17.5+121+114+

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

quotes/open-quote are CSS 2.1 — twenty years universal. The floor is only the color-mix() wash; replace with a flat tint for effectively unlimited support.

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →