Text Outline CSS HTML Often useful to add an outline to text even if it s white on a white background so you don t notice it The outline is really useful when you have something in the background such as an image and you want your text to stand out For example if the background has an image with lots of black and your text is black then there will be moments when you can t read the test Oh no So adding a contrasting opposite outline color to your text in these case is a real gem Of course there isn t an outline option in CSS But there is a work around Yeah The secret is to use the CSS 2 1 feature text shadow see the example below style p font size 118px color fff text shadow h shadow v shadow blur radius color none initial inherit text shadow 1px 0 0 000 0 1px 0 000 0 1px 0 000 1px 0 0 000 style p Testing p even in this example when the text and background are the same color you can still see the text style body background color rgb 10 10 10 very dark nearly black p font size 118px color 000 black text text shadow h shadow v shadow blur radius color none initial inherit text shadow 1px 0 0 fff 0 1px 0 fff 0 1px 0 fff 1px 0 0 fff style p Testing p As a bit of fun taking this further by mixing in a bit of sweet JavaScript you can change the options on the fly animate the colors and outline size oh yeah document body style height 200pt let div document createElement div document body appendChild div div innerHTML Cats and Dogs div style font size 100px div style color rgb 0 0 95 div style text shadow 1px 0 0 b00 0 1px 0 b00 0 1px 0 bbb 1px 0 0 b00 document body style height 200pt let div document createElement div document body appendChild div div innerHTML Cats and Dogs div style font size 100px div style color rgb 0 0 95 function ts el thick col div style text shadow thick px 0 0 col 0 thick px 0 col 0 thick px 0 col thick px 0 0 col end ts ts div 1 rgb 0 255 0 document body style height 200pt document body style text align center let div document createElement div document body appendChild div div innerHTML Cats and Dogs div style font size 100px div style color rgb 0 0 95 let dbg document createElement div document body appendChild dbg dbg style position absolute dbg style left 5px dbg style top 5px dbg style font size 8pt little helper function color from 0 to 1 heat mapping type color function percentageToColor percentage maxHue 120 minHue 0 const hue percentage maxHue minHue minHue return hsl hue 100 50 function ts el thick col div style text shadow thick px 0 0 col 0 thick px 0 col 0 thick px 0 col thick px 0 0 col end ts let t 1 let d 1 0 let c 0 0 ts div t percentageToColor c setInterval function t 0 5 d if t 30 t 20 d 1 if t 1 t 1 d 1 c 0 01 if c 1 c 0 ts div t percentageToColor c dbg innerHTML t t toFixed 2 c c toFixed 2 100 console log ready Update CSS3 text stroke With CSS 3 there is an extra style feature for specifically adding outlines to font offer more control called text stroke div style font size 64px webkit text stroke 4px black color orange This text has a black 4px stroke and a orange fill div
document body appendChild div div innerHTML Cats and Dogs div style font size 100px div style color rgb 0 0 95 function ts el thick col div style text shadow thick px 0 0 col 0 thick px 0 col 0 thick px 0 col thick px 0 0 col end ts ts div 1 rgb 0 255 0 document body style height 200pt document body style text align center let div document createElement div document body appendChild div div innerHTML Cats and Dogs div style font size 100px div style color rgb 0 0 95 let dbg document createElement div document body appendChild dbg dbg style position absolute dbg style left 5px dbg style top 5px dbg style font size 8pt little helper function color from 0 to 1 heat mapping type color function percentageToColor percentage maxHue 120 minHue 0 const hue percentage maxHue minHue minHue return hsl hue 100 50 function ts el thick col div style text shadow thick px 0 0 col 0 thick px 0 col 0 thick px 0 col thick px 0 0 col end ts let t 1 let d 1 0 let c 0 0 ts div t percentageToColor c setInterval function t 0 5 d if t 30 t 20 d 1 if t 1 t 1 d 1 c 0 01 if c 1 c 0 ts div t percentageToColor c dbg innerHTML t t toFixed 2 c c toFixed 2 100 console log ready Update CSS3 text stroke With CSS 3 there is an extra style feature for specifically adding outlines to font offer more control called text stroke div style font size 64px webkit text stroke 4px black color orange This text has a black 4px stroke and a orange fill div