Just adding this answer. "Stroking" the text is not the same as "Outlining".
Outlining looks great. Stroking looks horrid.
The SVG solution listed elsewhere has the same issue. If you want an outline you need to put the text twice. Once stroked and again not stroked.
Stroking IS NOT Outlining
body { font-family: sans-serif; margin: 20px;}.stroked { color: white; -webkit-text-stroke: 1px black;}.thickStroked { color: white; -webkit-text-stroke: 10px black;}.outlined { color: white; text-shadow: -1px -1px 0 #000, 0 -1px 0 #000, 1px -1px 0 #000, 1px 0 0 #000, 1px 1px 0 #000, 0 1px 0 #000, -1px 1px 0 #000, -1px 0 0 #000;}.thickOutlined { color: white;text-shadow: 0.0px 10.0px 0.02px #000, 9.8px 2.1px 0.02px #000, 4.2px -9.1px 0.02px #000, -8.0px -6.0px 0.02px #000, -7.6px 6.5px 0.02px #000, 4.8px 8.8px 0.02px #000, 9.6px -2.8px 0.02px #000, -0.7px -10.0px 0.02px #000, -9.9px -1.5px 0.02px #000, -3.5px 9.4px 0.02px #000, 8.4px 5.4px 0.02px #000, 7.1px -7.0px 0.02px #000, -5.4px -8.4px 0.02px #000, -9.4px 3.5px 0.02px #000, 1.4px 9.9px 0.02px #000, 10.0px 0.8px 0.02px #000, 2.9px -9.6px 0.02px #000, -8.7px -4.8px 0.02px #000, -6.6px 7.5px 0.02px #000, 5.9px 8.0px 0.02px #000, 9.1px -4.1px 0.02px #000, -2.1px -9.8px 0.02px #000, -10.0px -0.1px 0.02px #000, -2.2px 9.8px 0.02px #000, 9.1px 4.2px 0.02px #000, 6.1px -8.0px 0.02px #000, -6.5px -7.6px 0.02px #000, -8.8px 4.7px 0.02px #000, 2.7px 9.6px 0.02px #000, 10.0px -0.6px 0.02px #000, 1.5px -9.9px 0.02px #000, -9.3px -3.6px 0.02px #000, -5.5px 8.4px 0.02px #000, 7.0px 7.2px 0.02px #000, 8.5px -5.3px 0.02px #000, -3.4px -9.4px 0.02px #000, -9.9px 1.3px 0.02px #000, -0.8px 10.0px 0.02px #000, 9.6px 2.9px 0.02px #000, 4.9px -8.7px 0.02px #000, -7.5px -6.7px 0.02px #000, -8.1px 5.9px 0.02px #000, 4.0px 9.2px 0.02px #000, 9.8px -2.0px 0.02px #000, 0.2px -10.0px 0.02px #000, -9.7px -2.3px 0.02px #000, -4.3px 9.0px 0.02px #000, 7.9px 6.1px 0.02px #000}svg { font-size: 40px; font-weight: bold; width: 450px; height: 70px; fill: white;}.svgStroke { fill: white; stroke: black; stroke-width: 20px; stroke-linejoin: round;}<h1 class="stroked">Properly stroked!</h1><h1 class="outlined">Properly outlined!</h1><h1 class="thickStroked">Thickly stroked!</h1><h1 class="thickOutlined">Thickly outlined!</h1><svg viewBox="0 0 450 70"><text class="svgStroke" x="10" y="45">SVG Thickly Stroked!</text></svg><svg viewBox="0 0 450 70"><text class="svgStroke" x="10" y="45">SVG Thickly Outlined!</text><text class="svgText" x="10" y="45">SVG Thickly Outlined!</text></svg>PS: I'd love to know how to make the SVG be the correct size of any arbitrary text. I have a feeling it's fairly complicated involving generating the SVG, querying it with Javascript to get the extents, then applying the results. If there is an easier non-JS way, I'd love to know.
Update: As @12me21 points out, in SVG you can use paint-order="stroke" to make it stroke before filling and then you don't have to repeat the text
svg { font-size: 40px; font-weight: bold; width: 450px; height: 70px; fill: white;}.svgText { fill: white; stroke: black; stroke-width: 15px; stroke-linejoin: round; paint-order: stroke;}<svg viewBox="0 0 450 70"><text class="svgText" x="10" y="45">SVG Thickly Outlined!</text></svg>