Text border using css border around text

Question

Is there a way to integrate a border around text like the image below

User · Answer

Sure  You could use CSS3 text-shadow    text-shadow  0 0 2px  fff    However it wont show in all browsers right away  Using a script library like Modernizr will help getting it right in most browsers though

User · Answer

The following will cover all browsers worth covering   text-shadow  0 0 2px  fff     Firefox 3 5   Opera 9   Safari 1   Chrome  IE10    filter  progid DXImageTransform Microsoft Glow Color  ffffff Strength 1      IE lt 10

User · Answer

Use multiple text shadows    text-shadow  2px 0 0  fff  -2px 0 0  fff  0 2px 0  fff  0 -2px 0  fff  1px 1px  fff  -1px -1px 0  fff  1px -1px 0  fff  -1px 1px 0  fff       x000D   x000D  body   x000D    font-family  sans-serif  x000D    background   222  x000D    color  darkred  x000D      x000D  h1   x000D    text-shadow  2px 0 0  fff  -2px 0 0  fff  0 2px 0  fff  0 -2px 0  fff  1px 1px  fff  -1px -1px 0  fff  1px -1px 0  fff  -1px 1px 0  fff  x000D    x000D   lt h1 gt test lt  h1 gt  x000D   x000D   x000D    Alternatively  you could use text stroke  which only works in webkit   -webkit-text-stroke-width  2px  -webkit-text-stroke-color   fff       x000D   x000D  body   x000D    font-family  sans-serif  x000D    background   222  x000D    color  darkred  x000D      x000D  h1   x000D    -webkit-text-stroke-width  2px  x000D  -webkit-text-stroke-color   fff  x000D    x000D   lt h1 gt test lt  h1 gt  x000D   x000D   x000D    Also read more as CSS-Tricks

User · Answer

text-shadow  -1px 0 black  0 1px black  1px 0 black  0 -1px black

User · Answer

I don t like that much solutions based on multiplying text-shadows  it s not really flexible  it may work for a 2 pixels stroke where directions to add are 8  but with just 3 pixels stroke directions became 16  and so on    Not really confortable to manage   The right tool exists  it s SVG  lt text gt  The browsers  support problem worth nothing in this case   cause the usage of text-shadow has its own support problem too   filter  progid DXImageTransform can be used or IE  lt  10 but often doesn t work as expected   To me the best solution remains SVG with a fallback in not-stroked text for older browser   This kind of approuch works on pratically all versions of Chrome and Firefox  Safari since version 3 04  Opera 8  IE 9  Compared to text-shadow whose supports are  Chrome 4 0  FF 3 5  IE 10  Safari 4 0  Opera 9  it results even more compatible    x000D   x000D   stroke   x000D    margin  0  x000D    font-family  arial  x000D    font-size 70px  x000D    font-weight  bold  x000D      x000D     x000D    svg   x000D      display  block  x000D      x000D     x000D    text   x000D      fill  black  x000D      stroke  red  x000D      stroke-width  3  x000D      x000D   lt p class  stroke  gt  x000D     lt svg xmlns  http   www w3 org 2000 svg  width  700  height  72  viewBox  0 0 700 72  gt  x000D       lt text x  0  y  70  gt Stroked text lt  text gt  x000D     lt  svg gt  x000D   lt  p gt  x000D   x000D   x000D

[text] Text border using css (border around text)

Examples related to text

Examples related to css