Text shadow outline not complete in corners - css

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.

Answer 3

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>

Answer 4

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.