With CSS, you can design your text in many possible ways. You can add different colors, shadows, underlines or style it in a number of ways. In this post, you will be looking at different methods by which outline, or text stroke, can be added to text.
We will be covering two methods by which you can add outlines to your text. There is a third one also, but currently it is not supported by any browser.
Using text-stroke property
The text-stroke property adds stroke to your text. It can be used to change the width and color of the text. This property is only supported by WebKit-based browsers and that too on using the -webkit- prefix.
HTML
<p id="example1">This text has stroke</p>
CSS
#example1{
color: white;
font-size: 40px;
-webkit-text-stroke-width: 2px;
-webkit-text-stroke-color: black;
}
-webkit-text-stroke-width and -webkit-text-stroke-color specifies the width and the color of the stroke respectively. These are the two longhand properties for the shorthand property -webkit-text-stroke which specifies both the stroke color and the width at one go. Thus, the above CSS code is equivalent to the one shown below.
CSS
#example2{
color: white;
font-size: 40px;
-webkit-text-stroke: 2px black;
}
This text has stroke
You won't be able to see the above text if your browser does not support the text-stroke property, because it has a white font color. In order to make the text visible in all these browsers, give it any text color other than the background color so that it becomes visible in all the browsers which do not support this property and use the -webkit-text-fill-color property to override the text color in all WebKit-based browsers.
HTML
<p id="example3">The text stroke will not be visible for some browsers</p>
CSS
#example3{
color: black;
font-size: 34px;
-webkit-text-stroke: 1px black;
-webkit-text-fill-color: white;
}
The text stroke will not be visible for some browsers
The above text will appear black in all the browsers which do not support the text-transform property. For browsers which support this property, -webkit-text-fill-color overrode the black text color to make it white.
Now, let's come to another method which can be used to add oulines to your text.
Using text-shadow property
Since text-stroke doesn't have much browser support, you can use the text-shadow property which has comparatively large support from browsers.
HTML
<p id="example4">Stroke using text shadow</p>
CSS
#example4{
color: white;
font-size: 40px;
text-shadow: -1px 1px 0 #000,
1px 1px 0 #000,
1px -1px 0 #000;
-1px -1px 0 #000;
}
Stroke using text shadow
In the above demo, four text shadows (top-right, bottom-right, bottom-left and top-left) are given setting the blur radius 0. This effect is similar to that generated by the first method.
This method has an added advantage. We can adjust the horizontal and vertical shadows according to what suits the text. Adding a little blur radius will also give it a better look as in the following demo.
HTML
<p id="example5">Stroke with blur radius</p>
CSS
#example5{
color: white;
font-size: 40px;
text-shadow: -1px 1px 2px #000,
1px 1px 2px #000,
1px -1px 0 #000,
-1px -1px 0 #000;
}
Stroke with blur radius
A drawback of using text shadows is that if you give the shadow length greater than 1px, then you may see discontinuous stroke.
More with text stroke
You can combine the text-stroke and the text-shadow properties to give another great effect.
HTML
<p id="example6">Text Stroke</p>
CSS
#example6{
color: white;
font-size: 40px;
-webkit-text-stroke: 1px #23430C;
text-shadow: -1px 1px 2px #23430C,
1px 1px 2px #23430C,
1px -1px 0 #23430C,
-1px -1px 0 #23430C;
}
Text Stroke
HTML
<p id="example7">Text Stroke</p>
<p id="example8">Text Stroke</p>
CSS
#example7{
color: white;
font-size: 47px;
-webkit-text-stroke: 3px #E21F03;
}
#example8{
color: white;
font-size: 47px;
-webkit-text-stroke: 5px #E21F03;
}
Text Stroke
Text Stroke
The above demo gives the effect of a thin white colored line following the path of the text for the first text and a curvy bold look for the second text. This can be achieved by just increasing the stroke width.
Have a look at some more text stroke effects
HTML
<p id="example9">Text Stroke</p>
<p id="example10">Text Stroke</p>
<p id="example11">Text Stroke</p>
CSS
#example9{
color: white;
font-size: 47px;
-webkit-text-stroke: 1px #F8F8F8;
text-shadow: 0px 1px 4px #23430C;
}
#example10{
color: white;
font-size: 47px;
-webkit-text-stroke: 1px #F8F8F8;
text-shadow: 0px 2px 4px blue;
}
#example11{
color: #333;
background-color: black;
font-size: 56px;
-webkit-text-stroke: 1px #282828;
text-shadow: 0px 4px 4px #282828;
}
Text Stroke
Text Stroke
Text Stroke
These were some cool effects which you can add to your text using the above properties. You can come up with more beautiful text stroke effects by combining and altering the values of different properties like color, blur radius, stroke width and so on.
Browser Support
As discussed earlier, the text-stroke property is supported with the -webkit-prefix by the WebKit-based browsers. This is supported by Chrome, Safari, Opera and Android. On the other hand, text-shadow is supported by almost all the browsers.
There is also a third property text-outline for adding outline to text, but currently it is not supported by any browser.
Conclusion
A slight touch of stroke can give a vibrant look to your text. Although text-strokeserves the purpose by uniformly adding a smooth outline, I prefer using text-shadow due to its good browser support. The latter is not intended for adding outlines, but is a very good CSS hack that gives you the effect you are looking for. Moreover, you can give blur effect with shadows which can add depth to your layout. Although text-shadow does not give good results if the shadow length is greater than 1px, you can always use a combination of text-shadow and text-stroke.
