No matter if you are a newcomer to CSS or a professional, you must have once heard about CSS borders. These commonly used functions allow users to set the borders around the element, yet don’t affect the font.

So how to set font border in CSS? This article will introduce two common methods to accomplish the task.

How To Set Font Border In CSS

Method 1: Use The Text-Shadow Property

This property is useful in setting a text shadow around a specified text. However, with some manipulations, you can make this result like a font border.

Its basic idea involves adding a shadow effect on each direction’s fonts. For instance, a 1px border around the font will require a 1px shadow to the left, right, top, and bottom of this font.

For beginners, the text-shadow property shows four available values, including blur-radius, h-offset, v-offset, and the shadow’s color. In this case, set 0px blur radius to make it look like a font border.

Syntax:

text-shadow: h-shadow v-shadow blur-radius color|none|initial|inherit;

Property values:

• h-shadow: the value involves the font’s horizontal shadow.
• v-shadow: involves the font’s vertical shadow.
• blur-radius: activates the color around the given fonts.
• color: as its name suggests, sets the preferred color.
• none: doesn’t change anything around the font.
• initial: sets the format back to its default value.
• inherit: inherits the values from its parents.

Code:

<h1>The black font has red border</h1>
h1 {
 text-shadow: 0 0 2px red;
}

Method 2: Use The -webkit-text-stroke Property

This approach doesn’t add a shadow to the texts, making it like a real font border. If you want to follow the first method with this property, it would be okay to accomplish the task with the text-stroke property.

Yet, bear in mind that the text-stroke property doesn’t belong to the CSS specifications. For this reason, it would be best to add the webkit prefix to the property. This way, you make it work in such browsers as Safari, Chrome, and Firefox.

Webkit is an engine rendering a web browser, which is often employed in Safari, Chrome, and other popular ones. The text-stroke is combined from the text-stroke-color and text-stroke-width properties.

So use -webkit-text-stroke: 1px pink; if you want to add a 1px pink color font border.

div{
    -webkit-text-stroke: 1px pink;
    color: white;
}

Overall, the text-stroke enables users to decorate the texts in some vector-drawing applications, including Adobe Illustrator.

Conclusion

Without a shade of doubt, you will need to create and decorate the text by adding the outline to it. There are two widely used methods to set font border in CSS.

Both are easy to use and explained in detail in the article with simple examples. Choose the one suiting your purposes and decorate your text.