Applicare un bordo alle lettere di un testo con CSS

Con l’avvento di CCS3 il linguaggo di stilizzazione delle pagine web si è arricchito di diverse funzionalità interessanti. Tra queste, ad esempio, vi è la possibilità di modificare l’aspetto dei font mediante l’applicazione di un ombra. Tale possibilità, di fatto, consente anche di applicare dei bordi alle lettere di un testo.

In questo articolo vedremo, appunto, come creare scritte con lettere contornate senza dover ricorrere a nulla di più che a qualche riga di CSS. Per descrivere la procedura necessaria alla stilizzazione dei bordi dei font tramite CSS partiamo da un semplice esempio pratico.

Di seguito la stilizzazione di un tag <p> attraverso le più comuni proprietà CSS:

p {
  font-family: arial, verdana, tahona, sans-serif;
  font-size: 22px;
  line-height: 150%;
  color: #000;
}

Per definire un bordo da associare al font sarà sufficiente fare ricorso alla proprietà text-shadow di CSS 3 che, come detto, serve per applicare un effetto ombra al testo ma, se utilizzato nel giusto modo, può creare un effetto "bordato" alle lettere di un testo. Andiamo, quindi, a modificare la stilizzazione in questo modo:

p.testo-bordato {
  font-family: arial, verdana, tahona, sans-serif;
  font-size: 22px;
  line-height: 150%;
  color: #000;
  text-shadow: -1px 0 #FF0000, 0 1px #FF0000, 1px 0 #FF0000, 0 -1px #FF0000;
}

Prova il codice

Il risultato della modifica apportata al CSS dovrebbe produrre un output simile al seguente:

Sarà naturalmente possibile personalizzare vari aspetti della stilizzazione agendo sulla proprietà text-shadow in modo opportuno, cambiando colore e ampiezza del bordo.

Volendo possiamo anche crere un effetto particolare con il testo dello stesso colore dello sfondo, ad esempio possiamo scrivere in bianco su bianco, in quanto la leggibilità sarà garantita dal contorno del testo.

body {
  background-color: #FFF;
}
p.testo-bordato {
  font-family: arial, verdana, tahona, sans-serif;
  font-size: 22px;
  line-height: 150%;
  color: #FFF;
  text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000;
}

Questo il risultato:

Come potete vedere, seppur non esista una proprietà ad hoc per creare per creare un bordo al testo, grazie alla proprietà text-shadow è possibile ottenere quanto desiderato senza troppa fatica.