CSS - Is it possible to add a black outline around each character in text?

Issue

I would like to add a black outline around each character, so if the font id on the same color background as the foreground it is still readable.

Can this be done in CSS with or without browser specific css?

Solution

You can simulate it with the CSS 2.1 text-shadow property:

p {
    color: #fff;
    text-shadow: 1px 0 0 #000, 0 -1px 0 #000, 0 1px 0 #000, -1px 0 0 #000;
}

This is, of course, not supported in IE9 and below. See: http://www.jsfiddle.net/yijiang/UCjgg/ for a simple demo.

Answered By - Yi Jiang