text-stroke
Set the width and color of an edge around text glyphs.
Overview
| Class | Declarations |
|---|---|
text-stroke:<size>|<color> | -webkit-text-stroke: <size> <color>;
|
Examples
Set stroke width and color together
text-stroke:1px|var(--color-blue-50) sets -webkit-text-stroke width and color together. Compare the same filled glyphs with no stroke and a 1px blue edge.
<!-- No stroke --><p id="target" class="inline-block max-w:100% m:0 font-4xl font-semibold leading:1.5 text-stroke:0"> Outline</p><!-- 1px · blue stroke --><p id="target" class="inline-block max-w:100% m:0 font-4xl font-semibold leading:1.5 text-stroke:1px|var(--color-blue-50)"> Outline</p>Generated CSS
@layer theme { :root, :host { --color-blue-50: oklch(58.22% .2279 263.9) }}@layer utilities { .text-stroke\:1px\|var\(--color-blue-50\) { -webkit-text-stroke: 1px var(--color-blue-50) }}The prefixed property is implemented by multiple browser engines. Its appearance depends on glyph size and shape; a thick stroke can close small counters.
Combine stroke with transparent fill
Keep a visible stroke when making the glyph fill transparent. The outline follows currentColor while the interior shows the canvas behind it.
<!-- Filled glyph · 1px stroke --><p id="target" class="inline-block max-w:100% m:0 font-4xl font-semibold leading:1.5 text-fill-color-current text-stroke:1px|currentColor"> Outline</p><!-- Transparent glyph · 1px stroke --><p id="target" class="inline-block max-w:100% m:0 font-4xl font-semibold leading:1.5 text-fill-color:transparent text-stroke:1px|currentColor"> Outline</p>Preserve a readable solid fill when the outline treatment is unavailable or unsuitable. Transparent fill plus zero or transparent stroke would hide the text.
Split width and color when states differ
Use a width and color utility separately when only the edge color should change. Hover or focus to hide the blue stroke; the filled label stays visible and the width remains 1px.
<!-- 1px width · change only color --><button id="target" type="button" class="font-3xl font-semibold leading:1.5 text-fill-color-current text-stroke:1px text-stroke-blue-50 text-stroke:transparent:hover text-stroke:transparent:focus-visible"> Outline</button>Apply conditionally
Resize to change a 1px stroke to 2px at sm on screen. Print removes the stroke. The fill remains solid in every state.
<!-- Responsive stroke · solid fill --><p id="target" class="inline-block max-w:100% m:0 font-4xl font-semibold leading:1.5 text-fill-color-current text-stroke:1px|var(--color-blue-50) text-stroke:0@print text-stroke:2px@screen@sm"> Outline</p>