CSS Font Border ?

Question

With all the new CSS3 border stuff going on (-webkit...) is it now possible to add a border to your font ? (like the solid white border around the blue Twitter logo). If not, are there any not-to-ugly hacks that will accomplish this in CSS/XHTML or do I still need to fire up Photoshop

Answer 1

I once try to do those round corners and drop shadows with css3 stuffs. Later on, I found it is still very poor in support (Internet Explorer(s), of course!)

I end up trying to do that in JS (HTML canvas with IE Canvas), but performance impacts a lot (even on my C2D machine). In short, if you really need the effect, consider JS libraries (most of them should able to run on IE6) but don't over do as performance really impacts; if you still have alternative... like you can do SFiR, then PS it and SFiR it. CSS3 isn't enough ready today.

Answer 2

There seems to be a 'text-stroke' property, but (at least for me) it only works in Safari.

http://webkit.org/blog/85/introducing-text-stroke/

Answer 3

You could perhaps emulate a text-stroke, using the css text-shadow (or -webkit-text-shadow/-moz-text-shadow) and a very low blur:

#element
{
  text-shadow: 0 0 2px #000; /* horizontal-offset vertical-offset 'blur' colour */
  -moz-text-shadow: 0 0 2px #000;
  -webkit-text-shadow: 0 0 2px #000;
}

But while this is more widely available than the -webkit-text-stroke property, I doubt that it's available to the majority of your users, but that might not be a problem (graceful degradation, and all that).