“Stroked” text is simply text with an outline applied to it. There are two primary methods of achieving this with CSS: directly, via text-stroke, or (with some limitations) via a specialized use of text-shadow.

text-shadow is, very simply, box-shadow for text: the difference is that text-shadow takes the same sequence of values and applies it to letter forms, rather than entire elements.

The effect of a standard shadow is visually not the same as stroke: it’s not as sharp. For a better result, try layered offset shadows with no blur at all:

h1 {
	text-shadow: 1px 1px 0 red, -1px -1px 0 red;
}

While I find two shadows to usually be enough, on some fonts you may need to achieve coverage by using four layered shadows, each offset by 1 pixel in a different direction:

h1 {
	color: white;
	text-shadow: -1px -1px 0 #000, 1px -1px 0 #000,
	 -1px 1px 0 #000, 1px 1px 0 #000;
}

This works, but only for small offset values: much more than 1px and you’ll start to see some gaps, no matter how many shadows you have.

text-shadow is not intended to be a stroke to text: i.e. it is not an explicit outline. That purpose is served by text-stroke, which is currently a proposed property for CSS:

text-stroke: thickness color;

(Note that there is no “style” part to this declaration, i.e. no solid or dashed: text stroke in CSS is always solid. I find myself adding solid on occasion because the declaration is so close to border).

As a proposal, text-stroke is (as of this writing) only supported in Webkit-based browsers, using a proprietary vendor prefix:

h1 {
	-webkit-text-stroke: 1px red;
	text-stroke: 1px red;
}

One important danger is applying stroke to text is setting on letters that are the same color as their background:

h1 {
	color: white; 
	-webkit-text-stroke: 2px black;
	text-stroke: 2px black;
	background: white;
}

The result is that would see stroked text if you’re using Chrome or Safari, but nothing if you are using other browsers.

If you ever want the effect of stroked color x on text with a background of color x, it’s important to set the text to a visible color first for browsers that do not support stroke, and then override it with text-fill-color for browsers that do:

h1 { 
	color: black;
	-webkit-text-fill-color: white; 
	text-fill-color: white; 
	-webkit-text-stroke: 2px black; 
	text-stroke: 2px black; 
	background: white;
}

With this, you would see the text regardless of which browser you wish to use.

Right now the nearest duplication of this effect for other browsers is either using SVG text or text-shadow, detailed above.

Photograph by Calsidyrose, used under a Creative Commons Attribution 2.0 Generic license.

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.
Check out the CodePen demo for this article at https://codepen.io/dudleystorey/pen/YXxKNy