stroke
Setting the outline color of an SVG shape.
Overview
| Class | Declarations |
|---|---|
stroke-current | stroke: currentColor;
|
stroke:none | stroke: none;
|
stroke:<color> | stroke: <color>;
|
Examples
Set SVG stroke color
Stroke paints along a shape’s path. Give it a visible color and width, and use fill:none when the interior should remain unpainted.
<!-- Current color · blue outline --><svg id="target" role="img" aria-label="Triangle" width="96" height="96" viewBox="0 0 24 24" class="block fg-blue-60 fill:none stroke-current stroke-width:1.5"> <path d="M12 4 20 20H4Z" /></svg><!-- No stroke · interior paint only --><svg id="target" role="img" aria-label="Triangle" width="96" height="96" viewBox="0 0 24 24" class="block fill-blue-60 stroke:none stroke-width:1.5"> <path d="M12 4 20 20H4Z" /></svg>Generated CSS
@layer utilities { .stroke-current { stroke: currentColor } .stroke\:none { stroke: none }}stroke-current follows the shape’s computed color. The properties declared on each SVG are inherited by its path. The second example keeps fill visible so removing stroke does not hide the entire shape.
Use theme colors
Compare the mode-aware blue alias with the fixed blue-60 palette step. Both examples keep the same paths, round caps and 1.5-unit stroke width.
<!-- Theme alias · follows the mode --><svg id="target" role="img" aria-label="Three blue horizontal strokes" width="96" height="96" viewBox="0 0 24 24" class="block fill:none stroke-blue stroke-linecap:round stroke-width:1.5"> <path d="M4 7h16M4 12h12M4 17h16" /></svg><!-- Palette step · fixed blue-60 --><svg id="target" role="img" aria-label="Three blue horizontal strokes" width="96" height="96" viewBox="0 0 24 24" class="block fill:none stroke-blue-60 stroke-linecap:round stroke-width:1.5"> <path d="M4 7h16M4 12h12M4 17h16" /></svg>Switch the preview theme to inspect the paint values. Use stroke-width for thickness; changing stroke color does not resize the SVG viewport.
Apply conditionally
Hover or keyboard-focus the button to change its icon stroke. Print restores the current foreground color without changing the label or stroke width.
<!-- Hover or focus · inherited icon stroke --><button id="target" type="button" class="inline-flex items-center gap-xs px-md py-sm b:1px|solid|var(--color-line-base) r-sm font-md bg-surface-base text-body stroke-current stroke-current@print stroke-blue-60:hover@screen stroke-blue-60:focus-visible@screen"> <svg width="32" height="32" viewBox="0 0 24 24" aria-hidden="true" class="block fill:none stroke-linecap:round stroke-width:2"> <path d="m4 8 8-4 8 4-8 4Zm0 5 8 4 8-4M4 18l8 4 8-4" /> </svg> <span>Open layers</span></button>The native button carries the interaction state and accessible name “Open layers”. Its decorative SVG inherits stroke paint; the explicit fill and line width remain on the icon.