How to Create a Text Outline in CSS

Sometimes you need an outline around your text. Whether you’re placing white text on a multicolored image background or ensuring readability over complex visuals, a text outline can be essential for legibility.

The Challenge

You might expect to use something like text-outline: 1px black solid;, but that property doesn’t exist in CSS. The property that does exist, -webkit-text-stroke, only works with its -webkit- prefix: no browser ships an unprefixed version.

The Modern Solution: Using text-stroke

The -webkit-text-stroke property is now well-supported across all modern browsers, including Chrome, Safari, Firefox, and Edge. This is the cleanest approach for creating text outlines:

.element {
	-webkit-text-stroke: 1px black;
}Code language: CSS (css)

Browsers paint the fill first and the stroke on top of it, so a thicker outline covers more of each letter.

Alternative Method: The Text Shadow Technique

If you need a fallback for older browsers or prefer a different approach, you can use the text-shadow technique. This method works particularly well for 1px outlines:

.element {
	text-shadow:
		-1px -1px 0 #000,
		1px -1px 0 #000,
		-1px 1px 0 #000,
		1px 1px 0 #000;
}Code language: CSS (css)

This creates the outline effect by layering shadows in all four diagonal directions around the text. Note that this technique doesn’t work as well for outlines thicker than 1px.

Best Practice: Combined Approach

For maximum compatibility, you can combine both methods. Browsers that understand -webkit-text-stroke also apply text-shadow, so stacking the two declarations paints both effects at once instead of falling back. To turn the shadows into a real fallback, keep them in the base rule and switch them off where the stroke is supported:

.element {
	-webkit-text-stroke: 1px black;
	
	/* Shadow fallback for browsers without the stroke */
	text-shadow:
		-1px -1px 0 #000,
		1px -1px 0 #000,
		-1px 1px 0 #000,
		1px 1px 0 #000;
}

@supports (-webkit-text-stroke: 1px black) {
	.element {
		text-shadow: none;
	}
}Code language: CSS (css)

And that’s all there is to it! The stroke works in current Chrome, Edge, Firefox and Safari, and the shadow fallback gives an outline in browsers that lack the stroke but support text-shadow.