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

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 2

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.