CSS Text Stroke: Browser Support, Syntax, Issues

What is CSS text stroke?

CSS text stroke is a CSS property that paints a colored outline along the edges of text characters. It is exposed through the -webkit-text-stroke prefix and is documented in the WHATWG Compatibility Standard. The property is a shorthand for -webkit-text-stroke-width and -webkit-text-stroke-color.

Which browsers does CSS text stroke support?

CSS text stroke has wide modern browser support through the -webkit- prefix on every Chromium-based browser, Firefox, and Safari. Internet Explorer is the only major browser that never shipped the property.

What is the syntax of CSS text stroke?

-webkit-text-stroke is a shorthand that takes a width and a color in either order, separated by a space. The property accepts the global keywords inherit, initial, revert, revert-layer, and unset, and inherits down the cascade like color and font.

• <length>: Sets the stroke width. Accepts px, em, rem, and other CSS length units. Negative values are invalid. A 0 width disables the stroke without removing the declaration.
• <color>: Sets the stroke color. Accepts named colors, hex, rgb, rgba, hsl, hsla, oklch, color-mix, and currentColor. Defaults to currentColor when omitted.
• Order is flexible: -webkit-text-stroke: 2px navy and -webkit-text-stroke: navy 2px both parse to the same shorthand. The width is matched as a length and the color as a color value.
• Inheritance: The property inherits, so a stroke set on body propagates to every text node unless an inner selector overrides it. Use -webkit-text-stroke: 0 currentColor to reset the stroke on a child.
• Pairing with -webkit-text-fill-color: Setting -webkit-text-fill-color: transparent on the same element renders a hollow glyph. The fill-color property takes precedence over the standard color property when both are declared.
• Animation: -webkit-text-stroke-width animates as a length and -webkit-text-stroke-color animates as a color. The shorthand itself does not animate; use the longhand properties when transitioning between states.

/* Solid stroke around filled text */
.headline {
  color: #1f2937;
  -webkit-text-stroke: 2px #f97316;
}

/* Hollow display headline with transparent fill */
.hollow {
  font-size: 6rem;
  font-weight: 800;
  -webkit-text-stroke: 3px #2563eb;
  -webkit-text-fill-color: transparent;
}

/* Feature query gate with text-shadow fallback */
.outline {
  text-shadow:
    -1px -1px 0 #111,
    1px -1px 0 #111,
    -1px 1px 0 #111,
    1px 1px 0 #111;
}
@supports (-webkit-text-stroke: 1px black) {
  .outline {
    text-shadow: none;
    -webkit-text-stroke: 1px #111;
  }
}

What are the longhand properties of CSS text stroke?

-webkit-text-stroke is a shorthand for two longhand properties, and a third related property, -webkit-text-fill-color, controls the glyph interior. All three ship in the same browser versions as the shorthand.

What are the use cases of CSS text stroke?

-webkit-text-stroke is most often used as a display-typography effect on hero headlines, where the stroke replaces or layers over the glyph fill. The patterns below all ship to production on landing pages, e-commerce banners, and editorial layouts.

• Hollow display headlines: Pair -webkit-text-stroke: 3px brand-color with -webkit-text-fill-color: transparent to render an outline-only headline. The pattern is common on fashion, sports, and gaming sites where the headline doubles as a graphic element.
• Outlined captions over imagery: Apply a thin stroke in a contrasting color to caption text laid on top of a photo or video. The outline preserves legibility when the underlying image varies in brightness, removing the need for a solid text-shadow halo.
• Brand-color emphasis on inline runs: Wrap a phrase in a span with a brand-color stroke and a transparent fill to highlight a key word inside a paragraph without the visual weight of a bold or color shift.
• Animated draw-on intros: Transition -webkit-text-stroke-width from 0 to the final width on page load, and pair it with a delayed transition on -webkit-text-fill-color to fade the fill in after the outline draws.
• Scroll-driven section headers: Use container queries or scroll-linked animations to interpolate -webkit-text-stroke-color between brand colors as the reader scrolls, producing a section divider that responds to position.
• Print-style numbered headings: Render large editorial numbers (01, 02, 03) with a thick stroke and transparent fill to mimic letterpress chapter markers without loading a custom display font.

What are the known issues with CSS text stroke?

-webkit-text-stroke ships in every modern browser, but the way each engine handles the corner shape, the stroke alignment, and the fallback path still trips up production builds.

• Rounded corners in Firefox: Firefox rounds the stroke corners while WebKit and Blink leave them sharp. A 4px or thicker stroke on a serif font shows the difference clearly between Firefox and Safari. Reduce the stroke width or pick a font with rounder terminals to minimize the gap.
• No non-prefixed form: The property only ships as -webkit-text-stroke. There is no text-stroke entry in any CSS specification, so the prefix is permanent and a non-prefixed declaration will be ignored by every engine.
• Stroke is centered on the glyph edge: The browser paints half the stroke outside the glyph and half inside, so a thick stroke eats into the glyph interior. Increase the font-weight or pair the property with -webkit-text-fill-color to compensate when the inner shape collapses.
• No effect on color fonts and emoji: Color font tables (COLR, CBDT, sbix) ignore -webkit-text-stroke entirely, so an emoji or an icon glyph keeps its bitmap. Apply the property only to text rendered with monochrome outline fonts.
• Print rendering is inconsistent: Chrome and Safari print -webkit-text-stroke faithfully on macOS, but some Windows print drivers rasterize the stroke at a coarser resolution than the screen render, so a 1px stroke can disappear on print. Use a 2px minimum when the page targets print stylesheets.

In my experience, the failure that bites teams the most is the missing fallback, where a hollow headline with -webkit-text-fill-color: transparent ships without a paired text-shadow path, the QA pipeline tests Chrome and Firefox only, and a user on legacy Android Browser 3 or an old corporate IE 11 sees an invisible headline. Always gate the rule with @supports (-webkit-text-stroke: 1px black) or declare a text-shadow first, then override it inside the @supports block.

Citations

All CSS text stroke version numbers and platform notes in this guide come from these primary sources:

• WHATWG Compatibility Standard, -webkit-text-stroke: compat.spec.whatwg.org/#the-webkit-text-stroke
• MDN -webkit-text-stroke CSS property: developer.mozilla.org/en-US/docs/Web/CSS/-webkit-text-stroke
• MDN -webkit-text-stroke-width CSS property: developer.mozilla.org/en-US/docs/Web/CSS/-webkit-text-stroke-width
• MDN -webkit-text-stroke-color CSS property: developer.mozilla.org/en-US/docs/Web/CSS/-webkit-text-stroke-color
• MDN -webkit-text-fill-color CSS property: developer.mozilla.org/en-US/docs/Web/CSS/-webkit-text-fill-color
• Mozilla Firefox 49 release notes: mozilla.org/en-US/firefox/49.0/releasenotes
• Mozilla Hacks, supporting -webkit- prefixed properties in Firefox: hacks.mozilla.org/2016/06/aurora-49-webkit-prefix
• WebKit, surface for adding text outlines: webkit.org/blog/85/introducing-text-stroke
• Wikipedia Cascading Style Sheets: en.wikipedia.org/wiki/Cascading_Style_Sheets
• Microsoft Learn, Internet Explorer end of support: learn.microsoft.com/en-us/lifecycle/announcements/internet-explorer-11-end-of-support