Making text more readable on images using a text-outline workaround

text-outline or text-stroke is a convenient CSS property that, as of January 2015, has very limited support on major browsers. This is a bit of a shame since it is highly useful in certain circumstances, such as overlaying text on top of a background image and still ensuring that it is easily readable.

Photo by JustSomePics, CC-BY-SA.

Luckily, there's an easy way to approximate a text outline using text-shadow. text-shadow properties have four basic property values:

text-shadow: offset-x offset-y blur-radius color;

By setting blur-radius to zero (or leaving it out entirely), offset-x to 1px and offset-y to 0px, we can create something that looks like an outline on one side of our (otherwise invisible) white text.

This is some text

p {
    text-shadow: 1px 0px black;
    font-size: 30px;
    font-weight: bold;
    color: white;
}

text-shadow lets us specify multiple shadows per element, so let's make a similar shadow in all eight directions.

This is some text

p {
    text-shadow: 
         1px -1px black,
         1px  0px black, 
         1px  1px black, 
         0px -1px black, 
         0px  1px black, 
        -1px -1px black, 
        -1px  0px black, 
        -1px  1px black;
    font-size: 30px;
    font-weight: bold;
    color: white;
}

Prety good! If you zoom in and really look closely, you can see the individual shadows causing some imperfections, but this is really only noticible at extreme zoom levels. Overall, this technique is a convenient way to add a stroke or outline, for instance to ensure that text remains readable with a background image. This technique is usable wherever text-shadow is, including IE 10+.