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-too-ugly hacks that will accomplish this in CSS/XHTML or do I still need to fire up Photoshop?
There's an experimental CSS property called text-stroke, supported on some browsers behind a -webkit prefix.
h1 {
-webkit-text-stroke: 2px black; /* width and color */
font-family: sans; color: yellow;
}
<h1>Hello World</h1>
Another possible trick would be to use four shadows, one pixel each on all directions, using property text-shadow
:
h1 {
/* 1 pixel black shadow to left, top, right and bottom */
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
font-family: sans; color: yellow;
}
<h1>Hello World</h1>
But it would get blurred for more than 1 pixel thickness.