---
title: "TIL: Adding text borders with CSS"
date: 2023-01-12T19:25:42
slug: til-adding-text-borders-with-css
tags: [til]
---
After checking my website on mobile, I realised that I'd made a mistake, and included a pretty bad colour contrast issue on the page:

![Screenshot](./src/images/Screenshot-2023-01-12-at-09.34.55.png)

So I took to Google, and discovered that I could use the `-webkit-text-stoke` CSS property ([MDN Documentation](https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-text-stroke)), which will add a border to the characters. [It's well-supported](https://caniuse.com/?search=-webkit-text-stroke), despite using the `-webkit` prefix:

```css
.text {
    color: white;
    -webkit-text-stroke: 1px black;
}
```

This worked, but because the stroke goes on the inside of the text, rather than the outside, the result is much harder to read and doesn't look great.

![Screenshot](./src/images/Screenshot-2023-01-12-at-09.41.39.png)

So I took to Google again, and found a [StackOverflow answer](https://stackoverflow.com/a/47511171) that gave me a really useful snippet, using `text-shadow`:

```css
.text {
    color: white;
    text-shadow: -2px -2px 0 #000,
    0   -2px 0 #000,
    2px -2px 0 #000,
    2px  0   0 #000,
    2px  2px 0 #000,
    0    2px 0 #000,
    -2px  2px 0 #000,
    -2px  0   0 #000; 
}
```

This is a much better result - it produces a nice 2px border around the text, which makes it easier to read against bright backgrounds, but doesn't impact the legibility of the individual characters.

![Screenshot](./src/images/Screenshot-2023-01-12-at-19.23.00-1024x147.png)
