text-stroke-width
Adjust glyph stroke width while preserving the text size and fill.
Overview
| Class | Declarations |
|---|---|
text-stroke-width:0 | -webkit-text-stroke-width: 0;
|
text-stroke-width:<size> | -webkit-text-stroke-width: <size>;
|
Examples
Set text stroke width
A length such as text-stroke:2px controls the stroke width. Compare 0px, 1px and 2px on the same glyphs with the same blue edge color.
<!-- Stroke width · 0 --><p id="target" class="inline-block max-w:100% m:0 font-4xl font-semibold leading:1.5 text-fill-color-current text-stroke:0 text-stroke-blue-50"> Outline</p><!-- Stroke width · 1px --><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 text-stroke-blue-50"> Outline</p><!-- Stroke width · 2px --><p id="target" class="inline-block max-w:100% m:0 font-4xl font-semibold leading:1.5 text-fill-color-current text-stroke:2px text-stroke-blue-50"> Outline</p>Generated CSS
@layer utilities { .text-stroke\:2px { -webkit-text-stroke: 2px }}A stroke changes the glyph’s paint, not its font size. Heavy strokes can reduce the open spaces inside letters.
Use the explicit property name
text-stroke-width:1px emits the same width declaration as text-stroke:1px. The color and solid fill are supplied independently.
<!-- text-stroke:1px --><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 text-stroke-blue-50"> Outline</p><!-- text-stroke-width:1px --><p id="target" class="inline-block max-w:100% m:0 font-4xl font-semibold leading:1.5 text-fill-color-current text-stroke-width:1px text-stroke-blue-50"> Outline</p>Generated CSS
@layer utilities { .text-stroke-width\:1px { -webkit-text-stroke-width: 1px }}Remove the stroke width
text-stroke:0 removes the painted stroke. Open the actual print preview to compare this 1px screen outline with its plain printed fill.
<!-- 1px screen stroke · 0px print 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 text-stroke-blue-50 text-stroke:0@print"> Outline</p>The color remains specified but has no visible edge at zero width. A solid fill keeps the text readable.
Apply conditionally
Hover or focus to increase the edge from 1px to 2px. Print resets the width to zero; the glyph fill and font size stay unchanged.
<!-- Pointer and keyboard states --><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:0@print text-stroke:2px:hover@screen text-stroke:2px:focus-visible@screen"> Outline</button>