(Almost) Cross Browser Text-Stroke (Outline Text)

Posted on Monday, October 24th, 2011

Or how to fake it in most browsers

Super-short, super simple:

Using text-shadow, which is supported across most modern browsers, you can achieve the text-stroke (outlining the text) like so:

a.hover {
	text-shadow: -1px -1px 0 #990000, 
	1px -1px 0 #990000, 
	-1px 1px 0 #990000, 
	1px 1px 0 #990000; 
}


But, IE9 and earlier stubbornly refuses to participate. So, drop this in:
filter: glow(color=#990000,strength=1);

And, last but not least, add a width and height (to make it work in IE7 and earlier):

a.hover {
     width: auto;
     height: auto; /* width/height so IE7 and lower will work */
     filter: glow(color=black,strength=1);
     text-shadow: -1px -1px 0 #000, 
     1px -1px 0 #000, 
     -1px 1px 0 #000, 
     1px 1px 0 #000; 
}

And there you have it! Works in IE8 and later!

Example:

Cross Browser Text-Stroke

Leave a Reply

(required)

comment on this post »

No comments on this post yet.