Typography
text-stroke-color
Color a glyph stroke independently of its width and fill.
Overview
| Class | Declarations |
|---|---|
text-stroke-color:currentColor | -webkit-text-stroke-color: currentColor;
|
text-stroke-color:transparent | -webkit-text-stroke-color: transparent;
|
text-stroke-color:<color> | -webkit-text-stroke-color: <color>;
|
Examples
Set text stroke color
A color value such as text-stroke-blue-50 changes only the stroke color. Both specimens supply the same 1px width and solid fill.
Set text stroke color
Every specimen supplies a nonzero stroke width. Changing edge color leaves the fill and font geometry intact.
<!-- 1px stroke · blue-50 --><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><!-- 1px stroke · violet-50 --><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-violet-50"> Outline</p>Generated CSS
@layer theme { :root, :host { --color-blue-50: oklch(58.22% .2279 263.9) }}@layer utilities { .text-stroke-blue-50 { -webkit-text-stroke-color: var(--color-blue-50) }}Use the current color
text-stroke-current follows the foreground color. Transparent fill makes the independent outline easy to inspect; the stroke width remains 1px.
Use the current color
Every specimen supplies a nonzero stroke width. Changing edge color leaves the fill and font geometry intact.
<!-- Foreground · blue-50 --><p id="target" class="inline-block max-w:100% m:0 font-4xl font-semibold leading:1.5 fg-blue-50 text-fill-color:transparent text-stroke:1px text-stroke-current"> Outline</p><!-- Foreground · violet-50 --><p id="target" class="inline-block max-w:100% m:0 font-4xl font-semibold leading:1.5 fg-violet-50 text-fill-color:transparent text-stroke:1px text-stroke-current"> Outline</p>Make the stroke transparent
text-stroke:transparent hides the edge without resetting its width. Keep the glyph fill visible so the text remains readable.
Make the stroke transparent
Every specimen supplies a nonzero stroke width. Changing edge color leaves the fill and font geometry intact.
<!-- 1px width · blue-50 edge --><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><!-- 1px width · transparent edge --><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:transparent"> Outline</p>Apply conditionally
Hover or focus to switch the stroke from blue to violet. Print makes only the stroke transparent; its 1px width and the solid glyph fill remain.
Apply conditionally
Every specimen supplies a nonzero stroke width. Changing edge color leaves the fill and font geometry intact.
<!-- 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:transparent@print text-stroke-violet-50:hover@screen text-stroke-violet-50:focus-visible@screen"> Outline</button>