How to Set Font Border in CSS

With CSS, you can style fonts in several ways. For instance, we can set the border for a font to make it more attractive with respect to its looks. A font border is also added when it is required to outline some text. It also permits you to style the text and add color and width according to your preferences.

In this guide, we will learn about setting a font border in CSS.

How to Set Font Border in CSS?

In CSS, we can use the following properties to set font border:

• -webkit-text-stroke property
• text-shadow property

So, let’s get started.

Method 1: Use -webkit-text-stroke CSS Property to Set Font Border

The text-stroke property is specially introduced to set the border at fonts. However, the property text-stroke is not included in the W3c standards. This is why the keyword “-webkit” is added to it to perform the specified functionality. The -webkit-text-property works on Safari, Google Chrome, and Firefox browser.

Check out the following example to know more about setting the font border using the -webkit-text-stroke property.

Example

Here is the text for which we want to set the border:

Within our HTML file, we have added a text as a heading using the “<h2>“ tag and placed it into the body:

HTML

To set the border around the font, we will use the CSS “-webkit-text-stroke“ property with “1px” border and give it the “red” color. We will also specify the text color as blue, using the “color” property:

CSS

Now, we will save the code and open the HTML file in browser:

It can be seen that the font border has been applied successfully using the -webkit-text-stroke property and the added text looks stylish.

Method 2: Use text-shadow Property to Set Font Border

“text-shadow” property is itself a self-explanatory term as it is used for adding shadows in texts. However, it can be manipulated to set the font border efficiently.

So, let’s apply this CSS property on the same text to set the border around it.

Example

Here, we will make the red shadow pop out “1px” from each side using the text-shadow property, “-1px 0px 0px” will specify the left side shadow, “1px 0px 0px” will specify the right-side shadow, “0px -1px 0px” will specify the shadow of top side and “0px 11px 0px” will specify the shadow of bottom side:

CSS

Output

We have compiled different approaches for setting font borders in CSS.

Conclusion

To set the font border in CSS, the “-webkit-text-stroke” property and the “text-shadow” property can be used to add the font border in certain ways. The property text-stroke is not included in the W3c standards; however, it can be utilized with the -webkit keyword. This write-up has explained two methods that can assist you in setting font borders in CSS.