Definir borda da fonte em CSS

1. Use a propriedade -webkit-text-stroke para aplicar bordas à fonte em CSS
2. Use a propriedade text-shadow para aplicar bordas à fonte em CSS

Este tutorial irá apresentar métodos para aplicar borda e cor à fonte em CSS.

Use a propriedade -webkit-text-stroke para aplicar bordas à fonte em CSS

Podemos usar a propriedade text-stroke em um texto para aplicar bordas a uma fonte em CSS. Precisamos usar o prefixo webkit antes da propriedade text-stroke para usar o recurso. No entanto, ele só funciona em navegadores baseados em kit da web, como Safari e Chrome. A propriedade text-stroke permite decorar o texto em aplicativos de desenho vetorial como o Adobe Illustrator. A propriedade é a abreviatura das outras duas propriedades, text-stroke-width e text-stroke-color. Assim, podemos definir a largura e a cor da borda de um texto com a propriedade text-stroke.

Por exemplo, escreva algum texto dentro da tag h1 em HTML. Em CSS, selecione a tag h1 e aplique a propriedade -webkit-text-stroke. Defina a largura como 1px e a cor como red. Em seguida, defina a fonte para arial usando a propriedade font-family e dê a cor green.

O exemplo abaixo exibirá um texto de cor verde com uma borda de cor vermelha. É assim que podemos definir bordas em uma fonte com uma cor diferente.

Código de exemplo:

<h1>The green font has red border</h1>

h1 {
 -webkit-text-stroke: 1px red;
 font-family: arial; color: green;
}

Use a propriedade text-shadow para aplicar bordas à fonte em CSS

Podemos emular a propriedade text-stroke usando a propriedade text-shadow para aplicar uma borda à fonte em CSS. A propriedade text-shadow é usada para criar uma sombra para um texto. Os primeiros dois valores denotam as propriedades h-shadow e v-shadow. Eles denotam a posição da sombra horizontal e vertical. Podemos definir o valor blur-radius como o terceiro valor na propriedade text-shadow. Isso irá desfocar a sombra da posição fornecida com o raio fornecido. Podemos especificar a cor da sombra, tornando-a o quarto valor na propriedade text-shadow. Este método funciona na maioria dos navegadores.

Por exemplo, escreva algum texto dentro da tag h1 em HTML. Em CSS, selecione a tag h1 e escreva a propriedade text-shadow. Dê o valor 0 para as propriedades h-shadow e v-shadow. Escreva 2px para blur-radius e dê a cor red.

Emulamos o recurso de borda em uma fonte usando a propriedade text-shadow no exemplo abaixo. Definimos o valor 0 para os raios horizontal e vertical de forma que a sombra pareça uma borda ao dar a cor à sombra.

Código de exemplo:

<h1>The black font has red border</h1>

h1 {
 text-shadow: 0 0 2px red;
}