Why is my text stroke overlapping the text color?

The problem:

I would like my text stroke to not overlap on mobile the white that is the text color / text fill color. If you look at the following pictures the first picture is mobile and the second picture is web. I would like the header text to always look like the second image.

I have tried:

  • All combinations of the following:
    1. I have tried setting fill to the white color
    2. I have tried setting the fill to transparent and the regular text color to white
    3. No fill and text color to white
  • I have tried using :after sudo element to display the fill color but I am not experienced enough to get that to work


// this just sets min-height to 9.7rem @min-width768px
              textAlign: "center",
              fontSize: "calc(8px + 1vw)",
              fontFamily: "sans-serif",
              color: "white",
                fontFamily: "sans-serif",
                fontSize: "calc(18px + 1vw)",
                color: "white",
              Quick Overview of WAR Zone
            </span>{" "}
            <br /> The world&apos;s most fast and efficient match making
/* hope fully this will solve the porlem of the stroke overlappong the white text */
.letterBorder {
  font-weight: bold;
  font-family: Arial, sans-serif;
  -webkit-text-stroke: 2px #000; /* for Chrome and Safari */
  text-stroke: 2px #000; /* for other browsers */
  -webkit-text-fill-color: white; /* for Chrome and Safari */
  text-fill-color: white; /* for other browsers */
  text-align: center;
  text-wrap: balance;
  color: transparent; /* Hide the original text color */

I apologize for large images, but it makes it easier to see the header text

enter image description here

enter image description here

>Solution :

.letterBorder {
    color: white;
        -1px -1px 0 #000,  
        1px -1px 0 #000,
        -1px 1px 0 #000,
        1px 1px 0 #000;

Try this out and let me know if it works. It basically creates a fake shadow that will act as an outline.

Leave a Reply