How to Add Text Outline with CSS?

Since CSS does not provide a direct text-outline property, the CSS text-shadow property is used to create an outline effect around text by adding multiple shadows with offsets.

1. Using text-shadow Property

The text-shadow property is commonly used to add shadows to text, by applying multiple shadows in different directions, an outline effect is created around the text.

Syntax

text-shadow: offset-x offset-y blur-radius color;

<h1 style="text-shadow: -1px -1px 0 #000, 1px -1px 0 #000,
          -1px 1px 0 #000, 1px 1px 0 #000; color: white;">
  	This is an Outlined Text
</h1>

Output

An outline can also be added around the text using the -webkit-text-stroke Property.

2. Using -webkit-text-stroke Property

The -webkit-text-stroke property directly applies a stroke around the text. It is simpler and more efficient than text-shadow but only works in WebKit-based browsers like Chrome and Safari.

Syntax

-webkit-text-stroke: width color;

<h1 style="color: white; -webkit-text-stroke: 2px black;">
  	This is an Outlined Text
</h1>

Output