To add border to text and titles, I am using text-shadow
and adding multiple shadows to simulate that effect:
div {
font-family:verdana;
font-size:50px;
color:white;
text-shadow: 1px 0px 0px black,
0px 1px 0px black,
-1px 0px 0px black,
0px -1px 0px black;
}
<div>TEXTO CON BORDE</div>
This method works well if the border is a single pixel, but it doesn't work as well if the border is thicker, since you would have to add more shadows and still see jumps in the corners of the letters:
div {
font-family:verdana;
font-size:50px;
color:white;
text-shadow: 3px 0px 0px black,
0px 3px 0px black,
-3px 0px 0px black,
0px -3px 0px black;
}
<div>TEXTO CON BORDE</div>
My question: Is there any way to fix this problem? (apart from adding more shadows). And if possible, make it a method that works in all major browsers and is standard (I know it exists text-stroke
but it doesn't work in IE/Edge or Firefox and it's not standard).