The stroke-opacity property controls the transparency (alpha) applied specifically to an element’s stroke painting. It multiplies the stroke color’s alpha channel so the RGB channels remain unchanged while the stroke becomes more or less transparent. This makes it a precise tool for adjusting how strongly outlines, hairlines, dashed strokes or stroked text appear without altering the stroke hue or the fill.

Because stroke-opacity targets only the stroke, it does not affect fills or other parts of the element unless those parts have their own opacity settings. For example, fill-opacity governs the transparency of the fill separately, while the overall opacity of an element reduces the alpha of the entire element (stroke, fill, children and decorations). The alpha values contributed by color alpha, stroke-opacity and any higher-level opacity are effectively multiplied together to produce the final composited transparency; the stroke color itself comes from the stroke setting.

In practical use, stroke-opacity is handy for subtle visual tuning and for creating smooth reveal/hide effects on strokes via transitions or animations. It works with other stroke-related presentation decisions — for example, you can change whether the stroke is painted above or below the fill using paint-order while independently fading the stroke with stroke-opacity. Because it isolates just the stroke’s alpha, it’s often the simplest way to soften outlines or create layered visual effects without touching colors or global element opacity.