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:

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

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:

Demonstração:

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