Fonts on the web are essentially vector graphics; this​ means that they can be resized and manipulated just like vector images. CSS has a **text-stroke property** that can be used to create outlines around a text on Webkit-enabled browsers.

Consider the below examples which make use of text-stroke to create outlines around the text:

#example1 {
    font-size: 50px;
    color: white;

    /* the first value is the width 
    and the second value is the color */
    -webkit-text-stroke: 2px black; 
}
#example2 {
    font-size: 50px;
    color: red;
    -webkit-text-stroke: 2px blue;
}
#example3 {
    font-size: 50px;
	color: white;
	-webkit-text-stroke: 4px #E21F03;
}

<html>
 <head>
 </head>
 <body>
   <div>
     <h1 id = "example1"> Educative </h1>
     <h1 id = "example2"> Educative </h1>
     <h1 id = "example3"> Educative </h1>
   </div>
 </body>
</html>

codemirror

The **text-shadow property** can also be used to produce an effect similar to a text outline. A text can have four possible text shadows (top-right, bottom-right, bottom-left, and top-left), each with four values (horizontal shadow, vertical shadow, blur radius, and shadow color). 

The examples below use *text-shadow* in conjunction with *text-stroke*:

#example1 {
	font-size: 50px;
    color: white;
	text-shadow: -1px 1px 2px #000,
				  1px 2px 6px #000,
				  1px -1px 0 #000,
				  -1px -1px 0 #000;
}
#example2 {
	font-size: 50px;
    color: red;
    -webkit-text-stroke: 2px #5E0063;
	text-shadow: -1px 1px 2px #102286,
				  1px 1px 2px #102286,
				  1px -1px 5px #102286,
				  -1px -1px 5px #102286;
}
#example3 {
	font-size: 50px;
	color: #333;
	-webkit-text-stroke: 1px #282828;
	text-shadow: 0px 4px 4px #282828;
}

<html>
 <head>
 </head>
 <body>
    <div>
     <h1 id = "example1"> Educative </h1>
     <h1 id = "example2"> Educative </h1>
     <h1 id = "example3"> Educative </h1>
    </div>
 </body>
</html>

How to create a text outline using CSS