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, text-stroke, requires a vendor prefix and careful implementation for best results.

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;
	text-stroke: 1px black; /* Standard property for future-proofing */
}Code language: CSS (css)

This method works well for outlines of various thicknesses and is straightforward to implement.

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 use both methods together. Modern browsers will use text-stroke, while older browsers will fall back to the text-shadow approach:

.element {
	/* Modern browsers */
	-webkit-text-stroke: 1px black;
	text-stroke: 1px black;
	
	/* Fallback for older browsers */
	text-shadow:
		-1px -1px 0 #000,
		1px -1px 0 #000,
		-1px 1px 0 #000,
		1px 1px 0 #000;
}Code language: CSS (css)

And that’s all there is to it! You now know how to create CSS text outlines that work reliably across all browsers.