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

Question

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?

Answer 1

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.

Answer 2

There is an explicit -webkit way to add text outline, which is with -text-stroke. This is the experimental implementation of the equivalent standards track proposal (called text-outline in the CSS3 spec docs).