41 CSS Blockquotes + the Markup Quotes Should Use

Out of the box, a blockquote is an indented block of text and not much else. The browser applies a 40px indent and stops there. Borders, spacing, type and quotation marks all come from your stylesheet.

Articles use blockquotes to set a quote apart from the surrounding text, and so do documentation pages and testimonial sections.

The markup deserves as much attention as the styling. The HTML Standard wants attribution outside the blockquote, and the cite attribute, which holds the source URL, never shows on the page. A visible credit needs its own element, either a figcaption or a plain paragraph after the quote.

What is a CSS blockquote?

See the Pen
Modern Block Quote Styles by www.hanyapedia.com (@hanyapedia)
on CodePen.

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

See the Pen
Damn simple blockquote by Lukas Dietrich (@lukasdietrich)
on CodePen.

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 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 engine stylesheets wrote it as a physical shorthand, margin: 1em 40px (Mozilla’s html.css), 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

See the Pen
Blockquote & Cite V2 by Rases Kühlewein (@Rases)
on CodePen.

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 Wiki notes that older W3C text allowed author names 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 does the same with a paragraph after the quote. 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 been Baseline widely available since January 2020 (MDN Web Docs), 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

See the Pen
Automatic Quotes by Luke Watts (@lukewatts)
on CodePen.

Browsers add no quotation marks to a blockquote. You generate them with ::before and ::after, set content to open-quote and close-quote, and let the quotes property choose the characters (DAISY Knowledge Base).

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?

See the Pen
#1139 – Testimonial card with image by LittleSnippets.net (@littlesnippets)
on CodePen.

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

See the Pen
Great Responsive Blockquote by r-i-c-h (@r-i-c-h)
on CodePen.

The clamp() function takes a minimum, a preferred value and a maximum, and it has been Baseline widely available 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 LogRocket’s walkthrough, 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 (WordPress Block Editor Handbook).

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 Examples

Styling Blockquotes with Some Shadow

See the Pen
Styling blockquotes with box-shadow by Ramón M. Cros (@ramonmcros)
on CodePen.

Quote Drop Cap By Noah Blon

See the Pen
Big Drop Cap by Noah Blon (@noahblon)
on CodePen.

Blockquote Patterns? Yes, Please!

See the Pen
Blockquote Patterns by Derek Wheelden (@frxnz)
on CodePen.

Curly Quotes CSS That’s Straight Up Stunning

See the Pen
Curly CSS Quotes by Jorge Epuñan (@juanbrujo)
on CodePen.

Quote 1 – The Zesty Orange Peel

See the Pen
Quote 1 – orange peel by Mugtaba G (@Oddward)
on CodePen.

Quote Cards to Make Them Say “Whoa!”

See the Pen
Quote cards by Sabine Robart (@_Sabine)
on CodePen.

Flexible Full Width Block Quote: No Frills, Just Thrills

See the Pen
Flexible, Full-Width, “Justified” Text Blocks by Reuben L. Lillie (@reubenlillie)
on CodePen.

Unique Blockquote Design: Because Average is Meh

See the Pen
CSS Blockquote by Shahidul Islam Majumder (@sh4hids)
on CodePen.

Quotes with a Sprinkle of Font Awesome and Some Pseudo Magic

See the Pen
Quotes with Font Awesome and pseudo elements by Jaime (@jimmycow)
on CodePen.

CSS3 Blockquote Effects: Because Why Not?

See the Pen
12 – CSS3 Blockquote Effects Demos by Pawan Mall (@iPawan)
on CodePen.

Pure CSS Blockquote: Keepin’ It 100

See the Pen
Pure CSS Blockquote by John Fink (@johnfinkdesign)
on CodePen.

Classy Blockquote Styling: Pinkies Up!

See the Pen
Classy Blockquote Styling by Andrew Wright (@andrewwright)
on CodePen.

Alternating Blockquotes: Dance to the Rhythm

See the Pen
Alternating Blockquotes by Tommy Hodgins (@tomhodgins)
on CodePen.

Quote Effect with a Dose of CSS Blur Filter

See the Pen
Quote Effect using a CSS Blur Filter by 14islands (@14islands)
on CodePen.

Notepaper Blockquote: Old School Cool

See the Pen
Notepaper Blockquote by Thibaut (@Thibaut)
on CodePen.

Polygon-style Gradient Pull Quote: Geometry Was Never This Cool

See the Pen
Polygon-style gradient pull quote by Matt Popovich (@mattpopovich)
on CodePen.

Typography Quote: Sometimes, Less Is More

See the Pen
Typography Quote by Josh Collinsworth (@collinsworth)
on CodePen.

Quote Hovering: Like Magic on Paper

See the Pen
Quote hovering by Lisi (@lisilinhart)
on CodePen.

Subtle Quote? More like, Quiet Riot!

See the Pen
Subtle Quote by Tim Holman (@tholman)
on CodePen.

Fancy Blockquote Style: All Sass and Class

See the Pen
Fancy Blockquote Style by Matt Soria (@poopsplat)
on CodePen.

Continuous Image Border Quote: Because, Why Not?

See the Pen
Continuous Image Border Quote by Joni Trythall (@jonitrythall)
on CodePen.

DariyGRAY’s Stylish Blockquote: Stepping Up the Game

See the Pen
Stylish Blockquote by DariyGRAY (@DariyGRAY)
on CodePen.

Highlighted Blockquote with Citation: The Real MVP

See the Pen
Highlighted Blockquote with Citation by Siege Media Developers (@siegemediadev)
on CodePen.

Quote Animation Inspiration: Making Words Dance

See the Pen
Quote Animation Inspiration by Valentin Galmand (@valentingalmand)
on CodePen.

KBC Quote Style: Fresh Outta the Oven

See the Pen
KBC Quote style by Julien Vasseur (@Djules)
on CodePen.

CSS Grid Tschichold Quote: Geeking It Out

See the Pen
CSS Grid Tschichold Quote by Alyson Sherrard (@ux_unicorn)
on CodePen.

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?

See the Pen
CSS Quote Box Hover Effects by abdel Rhman (@abdelRhman345)
on CodePen.

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.

Author
Recent Posts

Bogdan Sandu

Bogdan Sandu specializes in web and graphic design, focusing on creating user-friendly websites, innovative UI kits, and unique fonts.

Many of his resources are available on various design marketplaces. Over the years, he's worked with a range of clients and contributed to design publications like Designmodo, WebDesignerDepot, and Speckyboy, Slider Revolution among others.