How to Outline Text in HTML

This article will introduce a method to outline text in HTML with the help of CSS.

Use text-shadow CSS Property to Provide Outline for Text in HTML

The text-shadow is a CSS property that adds a shadow to the text. It takes a comma-separated list of shadows as values, and each shadow contains X-offset, Y-offset, blur radius, and color.

For example if a text has a tet-shadow property of 1px 1px 3px black, it means the text-shadow of the text has X-offset of 1px, Y-offset of 1px , blur radius of 3px and has black color. X-offset and Y-offset are responsible for the direction of text shadow, and the X-offset represents the shadow in a horizontal direction, while Y-offset represents the shadow in a vertical direction.

The blur radius defines the distance from the text up to which the shadow is to be blurred. To give the text a complete outline, we have to set multiple values of text-shadow for the text has an outline in every direction.

For example, create a <div> and write random text inside it, and give the <div> a class name of outline. In CSS, select the class outline.

Set its color property to white. Next, Set the text-shadow property of div to -1px -1px 0 #000, 1px -1px 0 black,-1px 1px 0 black, 1px 1px 0 black;.

Here, we have applied four pairs of values for the text-shadow property. It creates the outline of the text in all directions, and we used 0 for blur radius as we do not want the text to be blurred.

The offsets value also accepts a negative value. The negative value for the X-offset will create the shadow to the left-hand side, while the negative Y-offset will create the shadow to the top of the text.

We also set the color of the text to white and the shadow to black so that the text and outline will be visible on the white background.

Code - HTML:

<div class="outline">
 Text shadow can be used to give an outline to the text.
</div>

Code - CSS:

.outline {
  color: white;
  text-shadow:
               -1px -1px 0 black,
                1px -1px 0 black,
               -1px 1px 0 black,
                1px 1px 0 black;
}

Thus, we can use the CSS text-shadow property to give an outline of the text in HTML.