Use CSS To Add Stroke Around Text

With some of the new graphical features you see in CSS3 it can start to add more and more effects to your HTML elements the same way you used to have to use photoshop to do. Things like box shadow and color gradients are now so easy to do in CSS that you don't even need photoshop anymore. Here is another CSS property that you might not realise existed but it's another effect you would normally do in Photoshop and that's adding a stroke around text, just by using the CSS property text-stroke. Currently this property is only supported on webkit so it will only work on Chrome or Safari, and you can only use it by prefixing the property with -webkit-.

-webkit-text-stroke: <width> <color>;

This accepts two values the width of the stroke and the colour of the stroke. This property now allows you to create a cool outline of any font you are using on your website. ## Black Stroke

.blackandwhite{
	font-family: 'Courgette';
	font-size:3em;
	color: black;
	text-align: center;
        -webkit-text-fill-color: white;
        -webkit-text-stroke: 2px black;
}

#Red Stroke

Red Stroke

.redandblack{
	font-family: 'Courgette';
	font-size:3em;
	text-align: center;
	color: red;
        -webkit-text-fill-color: black;
        -webkit-text-stroke: 2px red;
}

#Green Stroke

Green Stroke

.greenneon{
	font-family: 'Courgette';
	font-size:3em;
	text-align: center;
	color: green;
        -webkit-text-fill-color: black;
        -webkit-text-stroke: 2px green;
}

As you can see from the above examples is that we have also added another webkit property -webkit-text-fill-color. This property will overwrite the text color with this value. This means that we can set the text color to be something default and this is what the other browsers will see. Then adding the -webkit-text-fill-color will overwrite the color so we can now use the -webkit-text-stroke to add the webkit stroke.