Search code examples
cssfonts

CSS Font Border?

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?

Solution

  • 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.