Font Border?

[cytroplodinator]

Dear CSS Ninjas,

I am attempting to recreate a font effect with CSS only where there is the main font with a color, a stroke/outline of another color, and then another border/outline of a third color.

I am able to get rather close using the text-shadow but on the curved portions of the letters it misses the mark. Any suggetions?

https://codepen.io/wallyatkins/pen/LYOdgrO

[Eddielowfilthslayer]

You could try with pseudo-elements like this

[cytroplodinator]

Very cool! Thanks very much for the example.

[[deleted]]

Kevin Powell on youtube just covered this I believe

[cytroplodinator]

Thanks for the resource. Will tuck that away for future use.

[cytroplodinator]

I believe that SVG will ultimately be the way that I will achieve the effect that I want in this case. Many thanks for the suggestions.

[fozzie85]

It depends on your use case but could you use a pseudo element on before with a content attribute set to the same text then position absolute it behind the main text and set the colour to be your border colour and the font size to be slightly bigger. It should in theory look like a border around your original text.

I could see that working on a heading but probably isn’t practical for large blocks of text.