CSS3 Text Outline

You will need a browser that supports CSS3 to see this page properly.

A method to add an outline around some text is to define some solid shadows of the color that we want as border. This shadow will have no blurring and will have to be positioned shifted in all directions.

The quick brown fox jumps over the lazy dog

.bordershadow {
   color: #d11;
   text-shadow:
      white  1px  1px 0px, /* right down */
      white -1px  1px 0px, /* left  down */
      white -1px -1px 0px, /* right up   */
      white  1px -1px 0px, /* left  up   */

      /** next 4 shadows improve rendering */
      white  1px  0px 0px, /* right */
      white -1px  0px 0px, /* left  */
      white  0px  1px 0px, /* down  */
      white  0px -1px 0px, /* up    */

      /** lets add some blurred shadow to make it
          look a little nicer */
      black  3px  3px 7px;
   letter-spacing:1px;
}

4 vs 8 outline shadows

The comment in the code says that second 4 shadows improve rendering. This is especially true for sharp corners. Lets have a closer look: (Left with 4 shadows, right with all 8)

xt

xt

Letter spacing

Letter-spacing was added since, with the "border", the characters are now 2 pixels taller and broader.