2 Formas de colocar borda em texto com CSS

Neste post vamos ensinar duas formas de adiciona borda (stroke) em texto usando CSS, a primeira forma é nativa foi criada para essa função, a segunda forma é adptando a opção de sombra para que o texto fique com a borda.

Vídeo de demonstração:

Primeira forma

Text-stroke

A propriedade CSS especifica a largura e a cor dos traços dos caracteres do texto. Esta é uma propriedade abreviada para as propriedades extensas e . -webkit-text-stroke -webkit-text-stroke-width -webkit-text-stroke-color.

Opção sem abreviação da propriedade:

.texto {
    color: #000;
    -webkit-stroke-color: #FFF;
   -webkit-stroke-width: 1px;
}

Opção abreviado, com ela você consegue o mesmo comportamento da opção acima:

.texto {
     color: #000;
     -webkit-text-stroke: 1px #FFF;
      text-stroke: 1px #FFF;
}

O text-stroke pode ser incompatível com alguns navegadores mais antigos.

Segunda forma

Text-shadow

A propriedade text-shadow acrescenta sombras ao texto. Ela aceita uma lista de sombras separadas por vírgula que serão aplicados ao texto e ao text-decorations do elemento.

Com essa opção adaptamos a opção de sombra no texto para criar uma borda em volta do texto.

Exemplo:

.texto {
      color: #000;
      text-shadow: 
               -1px -1px 0px #FFF, 
               -1px 1px 0px #FFF,                    
                1px -1px 0px #FFF,                  
                1px 0px 0px #FFF;
}

Demonstração:

See the Pen USANDO BORDA NOS TEXTOS by Cupcom Codes (@cupcomcodes) on CodePen.