How to Create a Text Outline in CSS

Sometimes you need an outline around your text. A recent project required me to place white text on a multicolored image background, so giving that text a black outline was important for readability.

Should be easy, right? Just declare text-outline: 1px black solid;, and we’re done. Except text-outline doesn’t exist in CSS, and the thing that does, text-stroke, is basically only supported in Chrome. Uh-oh.

CSS Hacks to the Rescue: How to Make CSS Text Outlines

Luckily, there’s a very good CSS hack that gives you the effect you’re looking for, at least for 1px outlines. (It doesn’t work as well for 2px and thicker.) Here’s the Stack Overflow post that pointed me to truth.

For the code itself, if you want to give elements of class element a 1px black outline, that’s:

.element {
	text-shadow:
		-1px -1px 0 #000,
		1px -1px 0 #000,
		-1px 1px 0 #000,
		1px 1px 0 #000;
}

And that’s all there is to it! You now know how to create a CSS text outline.