To add the outline to the text we could use the text-outline property. However this property is not supported by any major browser at the moment of writing this tutorial.

Syntax:

selector {

     text-outline: thickness blur color | initial | inherit;

}

Values:

Following values may be assigned for this property:

  • thickness; The thickness of the outline for the text. Its value is given in px, em, etc.
  • blur; Creates a blur radius of the outline. It is an optional attribute.
  • color; Creates a color for the outline. It is a required attribute.
  • initial, inherit

Example

The text-outline property example:

​x
 
<!DOCTYPE html>
<html>
<head><style type="text/css">
p {
    text-outline: 2px 2px #ff0000;
        -webkit-text-outline: 2px 2px #ff0000;
}
</style></head>
​
<body>
​
<p>Here is the text-outline property example!</p>
<p>However, you probably won't be able to see anything on the previewer
  because of lack of a browser support.</p>
​
​
</body>
</html>

 

›› go to examples ››