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).
As far as I know, it is to be expected that
text-stroke
it is supported by most browsers. In the meantime there is an alternative solution, use SVG inline.Example:
By the comments:
I did several tests, the best option I find to adapt to height is to use viewBox and
height
100% on the element.Eye! This is a non -interchangeable solution with
text-stroke
, since for example it is not feasible to change the style of only one word of a paragraph.So far the closest solution is with
text-shadow
and a familysans-serif
you can get an interesting effect.To date there is no "perfect" solution for all browsers. As I see on the site http://caniuse.com/#search=text-stroke , neither Firefox, Internet Explorer, Edge nor Opera Mini support the
text-stroke
.The solution you use with
text-shadow
is the one recommended as the closest, but as you have tested, it only works correctly if the thickness of the border is1px
, if it is greater, the borders are not well defined at the corners of the letters.