Use -webkit-text-stroke to draw an outline around text glyphs. The unprefixed name text-stroke is not the interoperable spelling to teach for this effect. The prefixed spelling is supported by several browser engines, despite its name.
Keep a readable fallback
HTML and CSS
HTML
<p class="display">Outlined text</p>CSS
.display {
color: #164eae;
font-size: 2.5rem;
font-weight: 700;
}
@supports (-webkit-text-stroke: 1px #172334) {
.display {
-webkit-text-stroke: 1px #172334;
}
}Edit HTML or CSS to update the preview as you type. Copy code snippet copies the selected tab. Preview spacing and font defaults are not included.
The text remains filled and readable if the stroke rule is unsupported. Change the stroke width to see when it begins to crowd the letter shapes.
Syntax and behavior
The shorthand sets -webkit-text-stroke-width and -webkit-text-stroke-color. Use a nonnegative stroke width and a color. The initial component values are zero width and currentcolor; the values are inherited.
.display { -webkit-text-stroke: 1px navy; }
A practical use
A small stroke can distinguish a large display heading from its background. Check contrast and legibility on the actual background and at browser zoom. A thick outline is poorly suited to small body text.
Common mistakes
Setting the text fill to transparent can make the content unreadable when the stroke is unsupported or user styles alter it. Keep a readable base color. A text-shadow can supply a different decorative effect, but it is not the same operation as stroking a glyph.
Source and compatibility
MDN: -webkit-text-stroke documents the prefixed shorthand and individual compatibility entries. The URL of this lesson retains the historical unprefixed topic name.