How to create a text outline using CSS

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:

svg viewer

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:

Copyright ©2024 Educative, Inc. All rights reserved