CSS borders are very common in use and you might definitely have heard about them even if you are new to CSS. But as you might already know, we can set these borders only around the element, not around the font.
So, how can you set the border only around the fonts?
Well, In this article we are going to demonstrate you two easy methods that can be used to set font border using CSS. These two methods are as follows:
- Set font border using the text-shadow Property
- Set font border using the -webkit-text-stroke Property
Both methods are quite easy to use. Let’s discuss each one in detail.
Set Font Border using the text-shadow Property
The text-shadow property is actually used to set a text shadow around the text. But, if we do some manipulations, we can make it look more like the font borders.
The basic idea is to add a shadow effect on the fonts in each direction.
For example, if we want to add a 1px border around the fonts, we have to set a 1px shadow to the left, 1px shadow to the right, 1px shadow to the top, and the same 1px shadow to the bottom of the fonts.
If you do this, the text shadow will look more like a border and not the shadow.
In case you don’t know, the text-shadow property takes in four values the h-offset, v-offset, blur-radius, and the color of the shadow. We will keep the blur radius 0px so that it could look more like a font border.
Here is a working example that sets a black color 1px border around the fonts:
Example:
div{
text-shadow:
1px 0px 0px black, /* Right shadow */
-1px 0px 0px black, /* Left shadow */
0px 1px 0px black, /* Bottom shadow */
0px -1px 0px black; /* Top shadow */
color: white;
}
Set Font Border using the -webkit-text-stroke Property
In the previous method, we added a shadow to the text and made it look exactly like a real font border. But that’s not the only way of doing it.
We can also do the same thing with the text-stroke property which is specially introduced to set the font borders. However, the text-stroke property isn’t a part of the CSS spec.
Therefore, we have to add the webkit prefix ahead of the text-stroke property to make it work in browsers like Chrome and Sarari. Now firefox does also support the text-stroke property with webkit.
In case you don’t know, webkit is a web browser rendering engine used by popular web browsers like Chrome and Safari.
The text-stroke property is a shorthand of the text-stroke-width and the text-stroke-color properties. So, if we want to add a 1px black color font border, we can use -webkit-text-stroke: 1px black;.
Here is a working example which sets a 1px wide black color font border:
Example:
div{
-webkit-text-stroke: 1px black;
color: white;
}
