Add a clean outline around any text. Choose between modern -webkit-text-stroke for sharp single-pixel rings, or a multi-shadow fallback that works in every browser including Firefox & Edge legacy.
Apply the rule to any element. Want both stroke + a glow? Combine modes by stacking the text-shadow ring with a non-zero -webkit-text-stroke.
-webkit-text-stroke is supported in Chromium and Safari (and Firefox since 49), but the stroke is painted centered on the glyph edge — half overlaps the fill, which makes letters look thinner. Setting paint-order: stroke fill moves the stroke beneath the fill so the visible thickness matches your input value. The text-shadow ring works everywhere by stacking many tiny shadows around the glyph; the more samples, the smoother the ring — but more shadows means a heavier paint, so 8–16 is usually plenty.