A veces necesitamos crear texto y añadir el contorno al texto. Hay principalmente dos métodos para crear un borde a las fuentes que se enumeran a continuación:
- Usando la propiedad text-shadow
- Usando la propiedad text-stroke
Método 1: Usando la propiedad text-shadow: La propiedad text-shadow se utiliza para añadir un borde o sombra de fuente al texto.
Sintaxis:
text-shadow: h-shadow v-shadow blur-radius color|none|initial|inherit;
Valores de la propiedad:
- h-shadow: Establece la sombra horizontal alrededor de la fuente.
- v-shadow: Establece la sombra vertical alrededor de la fuente.
- blur-radius: Establece el radio de desenfoque alrededor de la fuente.
- color: Establece el color alrededor de la fuente.
- ninguno: No establece nada alrededor de la fuente.
- inicial: Establece el borde de la fuente a su valor por defecto.
- heredar: Hereda los valores de la propiedad de sus valores padre.
Valor de retorno: Devuelve un borde/sombra de fuente alrededor del texto.
Ejemplo 1: Este ejemplo utiliza la propiedad text-shadow para crear sombra al texto.
<!DOCTYPE html>
<html>
<head>
<title>
CSS text-shadow property </title> <style>
h1 {
text-shadow: 0 0 3px #FF0000, 0 0 5px #0000FF;
}
</style>
</head>
<body> <h1>GeeksforGeeks</h1> </body>
</html> 
Ejemplo 2: Este ejemplo utiliza la propiedad text-shadow para crear texto con bordes.
<!DOCTYPE html><html>
<head>
<title>
CSS text-shadow property
</title>
<style>
.GFG { color: white;
font-size: 50px;
text-shadow: -1px 1px 0 #000, 1px 1px 0 #000,
1px -1px 0 #000,
-1px -1px 0 #000;
}
</style>
</head> <body>
<pclass="GFG">GeeksforGeeks</p> </body>
</html> 
Método 2: Uso de la propiedad text-stroke: La propiedad text-stroke se utiliza para añadir un trazo al texto. Esta propiedad se puede utilizar para cambiar el ancho y el color del texto. Esta propiedad es compatible con el uso del prefijo -webkit-.
Ejemplo: Este ejemplo utiliza la propiedad text-stroke para crear un texto con bordes.
<!DOCTYPE html><html>
<head>
<title>
CSS text-stroke property
</title>
<style>
.GFG { color: white;
font-size: 50px; -webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: black; }
</style> </head> <body> <pclass="GFG">GeeksforGeeks</p>
</body>
</html> 