Es muy fácil hacer borde en un texto con imágenes, con Photoshop, pero, ¿y si queremos hacerlo con CSS? Una nueva característica de CSS3, text-stroke, (aunque todavía no es parte de él) es la inclusión de borde en el texto, de una forma muy sencilla, tal y como nos tiene acostumbrados CSS3. Pero hay que destacar que por ahora funciona únicamente en navegadores basados en WebKit (Safari, Chrome, iPhone). Por ejemplo, si aplicamos texto con un color blanco,en Firefox simplemente aparecerá una página en blanco, ya que no existe borde, porque no reconoce esta propiedad. Puedes usar Javascript para que detecte el borde, o asegurarte de que el color del texto no coincide con el del fondo. Un ejemplo sería este:

h1 {
-webkit-text-stroke: 3px black;
color: white;
}

Aplicar estilos según el navegador

Así podremos detectar si el navegador soporta esta propiedad, y si no, cambiamos el color del texto de blanco a a negro:

var h1 = document.createElement('h1');

if ( !( 'webkitTextStroke' in h1.style ) ) {

var heading = document.getElementsByTagName('h1')[0];

heading.style.color = 'black';

}

Si deseas opciones más avanzadas de personalización, mira Modernizr.

Ejemplo de su funcionamiento

Cabe destacar que podemos hacer un efecto similar con la propiedad text-shadow.

Vía | Nettuts