Text shadow outline not complete in corners

Question

I'm trying to add an outline to text using the CSS text-shadow property here.
The problem is that the shadow corners don't always meet. If you look below, you can see the problem on the upper right corner of the Y.
It doesn't look too bad with this font but with some fonts that my code uses it makes a big difference.

Is there a way to have the text completely surrounded by the box-shadow, especialy in the cornerns?

.shadowOutline {
  font: normal 200pt Arial;color: #fff;
  text-shadow: 
    -1px  1px #ff0000, 
    -1px -1px #ff0000, 
     1px  1px #ff0000, 
     1px -1px #ff0000, 
    -2px  2px #ff0000, 
    -2px -2px #ff0000, 
     2px  2px #ff0000, 
     2px -2px #ff0000;
  -webkit-font-smoothing: antialiased;
}

<div class="shadowOutline">My</div>

Answer 1

I managed to get it a little better using :

.shadowOutline {
  font: normal 200pt Arial;color: #fff;
  text-shadow: 
    -2px -2px 0 #ff0000, 
     2px -2px 0 #ff0000, 
    -2px  2px 0 #ff0000, 
     2px  2px 0 #ff0000, 
     2px  0px 0 #ff0000, 
    -2px  0px 0 #ff0000, 
     0px  2px 0 #ff0000, 
     0px -2px 0 #ff0000;
  -webkit-font-smoothing: antialiased;
}

<div class="shadowOutline">My</div>

The point is to offset the text-shadow in all directions :

• left
• right
• top
• bottom

But also

• top-left
• top-right
• bottom-left
• bottom-right

Keep in mind, that for values greater than one pixel you'll have to fill the gaps of sharp corner shadows. See for example letter "X" with (attempt of) ten pixels thick outline, first made by eight, second by twenty four shadows:

See this example

span {
  font: normal 200pt Arial;
  color: #fff;
  letter-spacing: 20px
}
.eight-shadows {
  text-shadow:
   -10px -10px 0 #f00, 
    00px -10px 0 #f00, 
    10px -10px 0 #f00, 
    10px  00px 0 #f00, 
    10px  10px 0 #f00, 
    00px  10px 0 #f00, 
   -10px  10px 0 #f00, 
   -10px  00px 0 #f00;
}
.twenty-four-shadows {
  text-shadow: 
   -10px -10px 0 #f00, 
    00px -10px 0 #f00, 
    10px -10px 0 #f00, 
    10px  00px 0 #f00, 
    10px  10px 0 #f00, 
    00px  10px 0 #f00, 
   -10px  10px 0 #f00, 
   -10px  00px 0 #f00,

   -05px -10px 0 #f00, 
    00px -10px 0 #f00, 
    05px -10px 0 #f00, 
    05px  00px 0 #f00, 
    05px  10px 0 #f00, 
    00px  10px 0 #f00, 
   -05px  10px 0 #f00, 
   -05px  00px 0 #f00, 

   -10px -05px 0 #f00, 
    00px -05px 0 #f00, 
    10px -05px 0 #f00, 
    10px  00px 0 #f00, 
    10px  05px 0 #f00, 
    00px  05px 0 #f00, 
   -10px  05px 0 #f00, 
   -10px  00px 0 #f00
}

<span class="eight-shadows">X</span>
<span class="twenty-four-shadows">X</span>

(In fact the middle "horizontal" shadows chunk could be omitted for this sample, because it contains no sharp vertical corner, but I left it there for clarity.)

To get "solid" 10px corner outlines you'd have to use 288 (= 4×9×8) shadows, and even then the result will be vertical or horizontal lines near the sharp corners instead of sharp ones.

Answer 2

You can do it with svg ,and you have a perfect resault

text{font-size:100px;
  fill: none;
  stroke: red;
  stroke-width:2px;
  stroke-linejoin: round;
}

<svg height="120" width="480">
  <text x="0" y="90" >I love SVG!</text>
</svg>

or you can use it directly with inline css like this :

<svg height="100" width="480">
<text x="0" y="80" fill="white" stroke="red" style="font-size:100px;stroke-width:2px;">I love SVG!</text>
</svg>

Answer 3

Headsup: for this purpose you can use -webkit-text-stroke (preferably in combination with -webkit-text-fill-color and it will work in current Firefox (49+) as well:

.shadowOutline {
  font: normal 200pt Arial;
  color: red;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 2px red;
}

<div class="shadowOutline">My</div>

Capable browsers will render outline around transparent letters, others opaque (red) letter, so this is somewhat more reliable than white text on white background in browsers without text-shadow support.

Answer 4

If you're okay wit a little more "blur" to your outline, using the third, optional property on text-shadow could help close those gaps you're seeing on the "Y".

From the MDN article for text-shadow:

Values

<color>

Optional. Can be specified either before or after the offset values. If the color is not specified, a UA-chosen color will be used. Note: If you want to ensure consistency across browsers, explicitly specify a color.

<offset-x> <offset-y> Required. These length values specify the shadow's offset from the text. <offset-x> specifies the horizontal distance; a negative value places the shadow to the left of the text. <offset-y> specifies the vertical distance; a negative value places the shadow above the text. If both values are 0, then the shadow is placed behind the text (and may generate a blur effect when is set). To find out what units you can use, see .

<blur-radius> Optional. This is a value. If not specified, it defaults to 0. The higher this value, the bigger the blur; the shadow becomes wider and lighter.

.shadowOutline {
  font: normal 200pt Arial;color: #fff;
  text-shadow: 
    -1px  1px 4px #ff0000, 
    -1px -1px 4px #ff0000, 
     1px  1px 4px #ff0000, 
     1px -1px 4px #ff0000, 
    -2px  2px 4px #ff0000, 
    -2px -2px 4px #ff0000, 
     2px  2px 4px #ff0000, 
     2px -2px 4px #ff0000;
  -webkit-font-smoothing: antialiased;
}

<div class="shadowOutline">My</div>