Achieving CSS White Text with Black Borders

Shotstack API
1

How can I create css white text with black borders? I’ve tried using the text-shadow property and -webkit-text-stroke: 1px black, neither which have worked.

Here’s my full json:

{
    "timeline": {
        "fonts": [
            {
                "src": "https://gelos-videos.s3.amazonaws.com/fonts/tiktok.ttf"
            }
        ],
        "tracks": [
            {
                "clips": [
                    {
                        "asset": {
                            "type": "html",
                            "html": "<p>hello</p>",
                            "css": "p { color: #ffffff; font-size:80px; font-family:'Proxima Nova Lt';  text-shadow: -1px 1px 0 #000, 1px 1px 0 #000, 1px -1px 0 #000, -1px -1px 0 #000; }",
                            "width": 1000,
                            "position": "top"
                        },
                        "offset": {
                            "y": -0.2
                        },
                        "start": 0,
                        "length": 3.33
                    },
                    {
                        "asset": {
                            "type": "video",
                            "src": "https://gelos-videos.s3.amazonaws.com/hooks/michael-dog.mp4"
                        },
                        "start": 0,
                        "length": 3.33
                    },
                  ]
            }
        ]
    },
    "output": {
        "format": "mp4",
        "size": {
            "width": 1080,
            "height": 1920
        },
        "fps": 30
    }
}```
2

We only support a small subset of HTML, based on HTML4 and CSS2, so text shadow and text stroke will not work. Here is the full HTML spec we support: HTML Support | Shotstack Documentation

There are a couple of workarounds to make text stand out from the background if needed, examples here: