What is a CSS blockquote?
When a stylesheet takes over the indent, border, spacing and type of a blockquote element, the HTML container for extended quotations from another source, you get what people call a CSS blockquote.
The element only says the text is quoted. How it looks is left to CSS.
The underlying HTML markup carries no design beyond the indent, so one quote can be a sidebar rule under one stylesheet and a card under another. A pull-style callout works too.
Blockquote, q and cite compared
The blockquote element is block-level and meant for extended quotations. Browsers indent it but add no quotation marks (DAISY Accessible Publishing Knowledge Base).
The q element does the same job inside a sentence, for short quotations, and browsers insert language-appropriate quotation marks on their own, according to MDN Web Docs. The cite element is something else again. It marks the title of a creative work and renders in italics by default (MDN Web Docs).
Placement is what decides it. If the quote sits inside a sentence, it’s q. If it stands on its own lines, it’s blockquote.
Default browser styles
Every browser shows the same blockquote defaults, because the HTML Standard’s rendering rules define them.
- Margin of 1em at the top and bottom (HTML Standard, rendering rules)
- 40px of margin on the start and end sides (HTML Standard, rendering rules)
- Display set to block (HTML Standard, rendering rules)
- An implicit ARIA role of blockquote (MDN Web Docs)
- Baseline widely available, and available across browsers since July 2015 (MDN Web Docs)
MDN Web Docs points to the margin properties as the way to change that indent.
The rule itself has changed shape over time. Older stylesheets wrote it with physical properties, margin-left: 40px and margin-right: 40px in the CSS 2.1 sample style sheet, while the current standard writes the indent as margin-inline: 40px, so it follows the writing direction.
How to mark up a quote and its source
The quoted text goes in a blockquote, the blockquote goes in a figure, and the figcaption sits beside it, outside the blockquote. Only the title of the work goes inside cite.
The HTML Standard requires attribution to sit outside the blockquote. Its own example credits a Carl Sagan passage through a figcaption, and a plain paragraph after the quote works just as well.
<figure>
<blockquote cite="https://example.com/source-article">
<p>The quoted passage goes here.</p>
</blockquote>
<figcaption>
Author Name, <cite>Title of the Work</cite>
</figcaption>
</figure>
The cite attribute takes a URL to the source document. Browsers do not render it, so it never replaces a visible credit, and a clickable source needs an anchor element inside the figcaption.
The DOM exposes the value as the cite property of HTMLQuoteElement (MDN Web Docs).
The cite element holds a title, not a person. The HTML Standard forbids people’s names inside it, so the author goes in plain text next to it.
The W3C’s own HTML 5.2 Recommendation allowed the name of the author in cite. That text is gone from practice, since the W3C HTML spec has redirected to the WHATWG version since 2019 (Adrian Roselli).
The current standard puts attribution outside the blockquote, and MDN’s own blockquote example puts nothing but the quoted text inside it. Older drafts allowed it inside, and plenty of tutorials still do it that way. The Nu Html Checker accepts a footer in there too, because validators cannot enforce the rule (Adrian Roselli, DAISY Knowledge Base).
I’d go with the outside pattern. It’s the only one the current standard supports, and the figcaption doubles as a styling hook.
CSS copied from older tutorials usually targets blockquote footer or blockquote cite. A figcaption outside the blockquote stays unstyled until the selector changes.
How to style a blockquote with CSS
Start with the margin, since everything else sits on top of it.
- Reset the margin. Replace the 1em and 40px defaults with your own spacing, and reset the figure too, because the standard gives it the same 40px inline margin.
- Add a border on the inline-start edge with
border-inline-start, in a color from your palette. - Padding comes next, enough for the text to clear the border. A background tint is optional, and only worth it if the text still passes the contrast check.
- Set font-size and line-height. Italics make sense only when the quote runs a line or two.
- Give the attribution its own figcaption rule, and reset cite to normal style if the italics clash.
blockquote {
margin: 2rem 0;
padding: 0.5rem 1.25rem;
border-inline-start: 4px solid #2f6f8f;
background-color: #f3f7f9;
font-size: 1.125rem;
line-height: 1.6;
}
figure {
margin: 2rem 0;
}
figure blockquote {
margin: 0;
}
figcaption {
margin-top: 0.5rem;
font-size: 0.9rem;
}
border-inline-start has worked across browsers since January 2020 (MDN Web Docs) and is Baseline widely available, so it needs no fallback in current browsers. On a right-to-left page the border moves to the right edge by itself, where border-left would stay put.
A tinted background lowers the color contrast of the text. WCAG Success Criterion 1.4.3 sets the minimum at 4.5:1 for normal text and 3:1 for large text, and the W3C’s Understanding document adds that ratios are not rounded, so 4.499:1 fails.
A bare blockquote selector also hits quotes inside comments and third-party widgets, so scope the rule with a class or a content wrapper.
Nesting is the other catch. A blockquote inside a blockquote repeats the border and padding, and since the HTML Standard’s examples include nested blockquotes, a blockquote blockquote rule that lightens or drops the inner border is worth adding.
Adding quotation marks with the quotes property and pseudo-elements
Browsers add no quotation marks to a blockquote (DAISY Knowledge Base). You generate them with ::before and ::after, set content to open-quote and close-quote, and let the quotes property choose the characters.
blockquote {
quotes: "\201C" "\201D" "\2018" "\2019";
}
blockquote p:first-of-type::before {
content: open-quote;
}
blockquote p:last-of-type::after {
content: close-quote;
}
Each pair of strings in the quotes property is an opening and a closing mark, and every further pair serves the next nesting level (MDN Web Docs). quotes: auto picks marks that suit the language set by the lang attribute, and quotes: none makes open-quote and close-quote produce nothing.
For a large decorative mark, give ::before a font-size in em units so the glyph scales with the quote text. Position it absolutely against a relatively positioned blockquote.
hanging-punctuation: first pushes the opening mark outside the text edge so the words stay aligned. As of October 2026 the web-features dataset still classes it as limited availability, and Safari is the engine that ships it (Adactio).
Where it’s missing, a negative text-indent inside an @supports not (hanging-punctuation: first) block does a similar job. The hung mark can trigger a horizontal scrollbar when the text has no spare space at its edge.
Whether a block quote should carry marks at all is a style question. Chicago-style guidance sets prose of five or more lines as a block with no quotation marks, because the indent already signals the quotation (Seattle University Library’s Chicago guide).
Long extracts follow that convention and keep the border or indent as the only signal. Short testimonials are where decorative marks earn their place.
Never type marks into the HTML and generate them in CSS as well, or readers see both.
Which blockquote style fits your content?
Long extracts inside body copy suit a plain border rule. Grids of short quotes do better as background cards, a single line lifted from the same article calls for a pull quote, and customer quotes with a name and role want a testimonial layout.
| Pattern | Best for | Markup | Fails when |
|---|
| Border rule | Long extracts in articles | blockquote | The quote is one short line and the rule outweighs it |
| Background card | Grids of short quotes | blockquote inside a card | The tint pushes the text under the contrast minimum |
| Pull quote | One line repeated from the article | aside, or blockquote with aria-hidden | Screen reader users hear the line twice |
| Testimonial | Customer quotes with name and role | blockquote plus figcaption | The name or avatar sits inside the blockquote |
The border rule is quiet and cheap, and it reads as a quotation without any decoration. The catch is little emphasis on a one-line quote.
A background card turns each quote into a self-contained unit, though the fill competes with the surrounding text and needs its own contrast check.
Pull quotes draw skimmers into the article. They also duplicate text and need deliberate markup.
Testimonials give the attribution as much weight as the quote, at the price of the most markup and the most CSS.
A pull quote repeats text that already sits in the article, so it fails the HTML Standard’s requirement that blockquote content be quoted from another source.
component.gallery recommends an aside here, with a q or blockquote nested inside only when the line also comes from another source. The DAISY Knowledge Base goes the other way with a duplicated blockquote that has the doc-pullquote role and aria-hidden, so assistive technology skips the repeat. That role comes from the digital publishing extension of ARIA.
Card styles suit testimonial grids, where each quote already lives in its own box, the same logic behind most card layouts built in CSS.
For quotes inside running text, skip the card. A tinted box splits the reading flow, and the border rule does the same job with less weight.
Responsive, dark mode and accessible blockquote styles
The clamp() function handles scaling for type and padding, and a prefers-color-scheme block handles colors. Meaning should stay in the HTML either way, because generated content is not announced the same way everywhere.
Responsive and dark mode
The clamp() function takes a minimum, a preferred value and a maximum, and it has worked across browsers since July 2020 (MDN Web Docs).
blockquote {
padding: clamp(0.75rem, 2vw, 1.5rem);
font-size: clamp(1rem, 0.9rem + 0.5vw, 1.25rem);
overflow-wrap: break-word;
color: var(--quote-text);
background-color: var(--quote-bg);
border-inline-start: 4px solid var(--quote-rule);
}
:root {
--quote-text: #1d2a33;
--quote-bg: #f3f7f9;
--quote-rule: #2f6f8f;
}
@media (prefers-color-scheme: dark) {
:root {
--quote-text: #e6edf1;
--quote-bg: #1b252c;
--quote-rule: #6db3d1;
}
}
Keep a rem term in the preferred value so browser zoom still scales the text. Pair the quote with the responsive typography rules used for body copy so it never outgrows its column.
Put the palette swap inside a media query and define colors as custom properties, so the blockquote rule itself stays untouched. The prefers-color-scheme feature became available across browsers in January 2020 (MDN Web Docs), and the web-features dataset dates its Baseline widely available status to 15 July 2022.
Run the contrast check again on the dark palette. A pass in light mode does not carry over.
Accessibility
Sources disagree about the figure wrapper. Adrian Roselli’s 2023 tests in NVDA, JAWS, Orca and macOS VoiceOver found the figure and figcaption pattern unnecessarily verbose, according to Garrett Dimon’s summary, while the DAISY Knowledge Base says the figure choice does not significantly change the experience for assistive technology users.
The difference is method. Roselli compared actual announcements, and DAISY gives general markup guidance.
That makes the figure wrapper a trade-off, not a requirement. Where verbosity matters, a paragraph after the blockquote keeps attribution outside the quote and satisfies the same rule.
The same tests found that no screen reader used the cite attribute, and JAWS read the URL aloud (Roselli, via Dimon).
Generated marks are a separate problem. MDN’s content page says CSS-generated text is not in the DOM, so some assistive technology and browser combinations will not announce it. Sara Soueidan notes that Chrome and Firefox now expose pseudo-elements in the accessibility tree.
Treat a decorative glyph as decoration either way. The blockquote role already announces the quotation, so the glyph adds nothing for screen reader users.
blockquote::before {
content: "\201C";
content: "\201C" / "";
}
The slash syntax supplies empty alternative text and marks the glyph as decorative. Browsers that do not parse it drop the second declaration and keep the first, as a Mozilla Bugzilla discussion of the feature notes.
Blockquote output in Bootstrap, Tailwind CSS and WordPress
Bootstrap styles blockquote through opt-in classes. Add .blockquote to the element, wrap it in a figure, and use a figcaption with .blockquote-footer for the source. Text utilities such as text-center and text-end on the figure align the quote (Bootstrap 5.3 documentation).
Tailwind CSS resets blockquote margin to 0 through Preflight, so the quote has no indent until you add utility classes, according to the Tailwind CSS documentation. The first-party typography plugin restyles raw HTML such as blockquote through its prose class, per the plugin’s documentation, and Tailwind projects that publish long articles usually reach for it.
WordPress works differently. The core/quote block saves the quote text in a blockquote and the citation in a cite element, and it ships 2 block styles, Default and Plain (the block’s block.json in the Gutenberg repository).
They also disagree on where attribution lives. Bootstrap’s documentation follows the standard and keeps it outside, while the Quote block’s saved markup places the cite element inside the blockquote (Gutenberg source).
Selectors written for one pattern miss the other, so a stylesheet shared across builders needs both. To restyle .blockquote without editing the framework, override Bootstrap’s CSS in a stylesheet that loads after it, and scope your selectors with a class so the two rule sets do not fight.
CSS blockquote FAQ
How do you center a blockquote?
Set text-align: center on the blockquote. To center the box itself, add a max-inline-size and margin-inline: auto.
Swap a one-sided border for a top or bottom rule, because a rule on a single side makes a centered quote look misaligned.
Can a blockquote have a hover effect?
Yes. Add a :hover rule with a transition on color, background-color or border-color, and wrap the transition in a prefers-reduced-motion: no-preference query.
A blockquote is not focusable and touch screens have no hover, so keep information out of the hover state.
Does the style attribute work on a blockquote?
Yes. A style attribute overrides rules from a style tag or an external stylesheet and affects only that one blockquote (Dofactory HTML reference).
It cannot hold a media query or a pseudo-element, so quotation marks and dark mode still belong in a stylesheet.
Should a blockquote carry schema.org Quotation markup?
It’s optional and never replaces the blockquote element. The Quotation type is a CreativeWork subtype that describes a quote in structured data with properties such as text, creator and isPartOf.
Adoption stays small, since schema.org’s usage counter lists both the Quotation type and its spokenByCharacter property at 1K to 10K domains (Google, August 2026).
Can a blockquote hold more than one paragraph?
Yes, and another blockquote as well. The content model is flow content, so a blockquote takes several paragraphs, lists or nested quotes.
The HTML Standard’s own examples nest one blockquote inside another.
Keeping CSS Blockquote Styles Consistent Across a Site
CSS blockquote styles stay consistent when one scoped rule set, loaded after any framework stylesheet, governs every quote and keeps its colors in custom properties.
Fix the attribution markup first, because selectors written for a footer inside the blockquote miss a figcaption outside it. Write the scoped rule set after that, and test dark mode and narrow screens last.
A class-based scope shields comments and widgets, but older posts without the class stay unstyled until someone migrates them.
As of October 2026 only Safari ships hanging-punctuation, and the negative text-indent fallback can go once Chrome and Firefox follow.
Type settings are the next layer to audit, and the guide to accessible typography covers how font size, line height and spacing hold up for readers.
