Change your colour scheme

TIL: Adding text borders with CSS


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:


So I took to Google, and discovered that I could use the -webkit-text-stoke CSS property (MDN Documentation), which will add a border to the characters. It’s well-supported, despite using the -webkit prefix:

.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.


So I took to Google again, and found a StackOverflow answer that gave me a really useful snippet, using text-shadow:

.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.



About the author

My face

I'm Lewis Dale, a software engineer and web developer based in the UK. I write about writing software, silly projects, and cycling. A lot of cycling. Too much, maybe.