How To Add Stroke Around Text Using CSS Customization?

This Article Was Live On: Jan 14, 2018 At January 14, 2018 And Till Now HaveNo comments.

Hello Guys, I'm Surajit Sonowal from TricksIdeas. As in the era of CSS, every thing can be done by CSS. Now as you know that strokes was only made through Photoshop and other photo editing software but now CSS make it ore easy to do it online. Now you can add strokes around your text using pure CSS only.

So now you can use it without any pixel problem as fonts are vector and CSS also work as vector so it will not be stretch even your fonts are 1000px of size. You can also check it compatibility at Can I Use

Features:

1.) No Need To Use Image.
2.) Pure CSS3 Codes.
3.) Full Features Code.
4.) WebKit Support Only
5.) Many Browser Supported.

Here we are sharing CSS codes that you have to add in your template CSS file or inline CSS of your any text. There are two type as one is all in one and other is briefly explained for new designers. So just copy paste and edit it with your desire.

color: white;<br /> -webkit-text-stroke: 2px black;

color: white;<br /> -webkit-text-stroke-width: 2px;<br /> -webkit-text-stroke-color: black;

This Is A DEMO

Customization:

You just have to change Stroke width and color. Rest your all CSS will be used here.

Last Words:

This is what we have for designers. So if you liked it then share it and leave your feedback. If you have quires then feel free to ask us.