How to outline text in HTML CSS

Question

Let s say I have white characters and I want a black outline over each character  this is different from outlining the whole text box     What is the code to make this outline     EDIT  Well bummer  I m not asking for a whole document  All I want is the one line of code and the needed parameters to create an outline for text  I don t feel the need to post code as it is really just a simply request    I have tried using text-outline  2px 2px  ff0000  but this is not supported across any major browsers   Scope    function createTitleLegend         legendTitle   document createElement  div        legendTitle id    legendT       contentTitle           contentTitle push   lt h3 gt  lt font size  16  gt TM lt  font gt  lt  h3 gt         contentTitle push   lt p class  test  gt  lt br gt  lt font size  6  color  000000 gt We have  lt b gt  lt font size  7  color  white  text-outline  2px 2px  FF0000  gt 21421 lt  font gt  lt  b gt  lt  font gt  lt  p gt         legendTitle innerHTML   contentTitle join            legendTitle index   1      I have tried using outline within the font  as well as a class and div  None works  The bruteforce approach doesn t seem to work either   Yet another EDIT   This is the key line where I want the outline    contentTitle push   lt p class  test  gt  lt br gt  lt font size  6  color  000000 gt We have  lt b gt  lt font size  7  color  white  gt 21421 lt  font gt  lt  b gt  asdasd lt  font gt  lt  p gt       Before I apply the outline  the string is written in one line  After I apply the outline  we have 3 different lines of text   contentTitle is a legend in a Google Maps where the text align is at the center  That sentence that is being pushed uses two different type of fonts  one for the words and one for the number  In the event that I apply a text shadow with a div  that creates a new line  I know the normal solution for keeping everything in the same line is the use of float  However if I float  nothing is centered anymore   Maybe I m not floating correctly  but I ve tried both div style float and class  float  thus far

User · Answer

There are some webkit css properties that should work on Chrome Safari at least  -webkit-text-stroke-width  2px  -webkit-text-stroke-color  black   That s a 2px wide black text outline

User · Answer

from  Outline effect to text   strokeme       color  white      text-shadow      -1px -1px 0  000      1px -1px 0  000      -1px 1px 0  000      1px 1px 0  000

User · Answer

Try this    x000D   x000D   lt  DOCTYPE html PUBLIC  -  W3C  DTD XHTML 1 0 Transitional  EN   http   www w3 org TR xhtml1 DTD xhtml1-transitional dtd  gt  x000D   lt html xmlns  http   www w3 org 1999 xhtml  gt  x000D   lt head gt  x000D   lt meta http-equiv  Content-Type  content  text html  charset utf-8    gt  x000D   lt title gt Untitled Document lt  title gt  x000D   lt style type  text css  gt  x000D   OutlineText   x000D   font  Tahoma  Geneva  sans-serif  x000D   font-size  64px  x000D      color  white  x000D      text-shadow  x000D         Outline    x000D      -1px -1px 0  000000  x000D      1px -1px 0  000000  x000D      -1px 1px 0  000000  x000D      1px 1px 0  000000    x000D      -2px 0 0  000000  x000D      2px 0 0  000000  x000D      0 2px 0  000000  x000D      0 -2px 0  000000     Terminate with a semi-colon    x000D    x000D   lt  style gt  lt  head gt  x000D   x000D   lt body gt  x000D   lt div class  OutlineText  gt Hello world  lt  div gt  x000D   lt  body gt  x000D   lt  html gt  x000D   x000D   x000D       and you might also want to do this too    x000D   x000D   lt  DOCTYPE html PUBLIC  -  W3C  DTD XHTML 1 0 Transitional  EN   http   www w3 org TR xhtml1 DTD xhtml1-transitional dtd  gt  x000D   lt html xmlns  http   www w3 org 1999 xhtml  gt  x000D   lt head gt  x000D   lt meta http-equiv  Content-Type  content  text html  charset utf-8    gt  x000D   lt title gt Untitled Document lt  title gt  x000D   lt style type  text css  gt  x000D   OutlineText   x000D   font  Tahoma  Geneva  sans-serif  x000D   font-size  64px  x000D      color  white  x000D      text-shadow  x000D         Outline 1    x000D      -1px -1px 0  000000  x000D      1px -1px 0  000000  x000D      -1px 1px 0  000000  x000D      1px 1px 0  000000    x000D      -2px 0 0  000000  x000D      2px 0 0  000000  x000D      0 2px 0  000000  x000D      0 -2px 0  000000   x000D         Outline 2    x000D      -2px -2px 0  ff0000  x000D      2px -2px 0  ff0000  x000D      -2px 2px 0  ff0000  x000D      2px 2px 0  ff0000    x000D      -3px 0 0  ff0000  x000D      3px 0 0  ff0000  x000D      0 3px 0  ff0000  x000D      0 -3px 0  ff0000     Terminate with a semi-colon    x000D    x000D   lt  style gt  lt  head gt  x000D   x000D   lt body gt  x000D   lt div class  OutlineText  gt Hello world  lt  div gt  x000D   lt  body gt  x000D   lt  html gt  x000D   x000D   x000D    You can do as many Outlines as you like  and there s enough scope for coming up with lots of creative ideas   Have fun

User · Answer

Try CSS3 Textshadow    box textshadow        text-shadow  2px 2px 0px  FF0000     FF3 5   Opera 9   Saf1   Chrome  IE10        Try it yourself on css3please com

User · Answer

With HTML5 s support for svg  you don t need to rely on shadow hacks    x000D   x000D   lt svg  width  100   viewBox  0 0 600 100  gt  x000D   lt text x 0 y 20 font-size 12pt fill white stroke black stroke-width 0 75 gt  x000D      This text exposes its vector representation   x000D      making it easy to style shape-wise without hacks   x000D      HTML5 supports it  so no browser issues  Only downside  x000D      is that svg has its own quirks and learning curve  x000D       c f  bounding box issue no typesetting by default  x000D   lt  text gt  x000D   lt  svg gt  x000D   x000D   x000D

[html] How to outline text in HTML / CSS

Examples related to html

Examples related to css