HTMLで書かれたテキスト文字をCSSを使って縁取りする方法をご紹介したいと思います。
CSSを使ってテキストの縁取りをする方法はいくつかありますが、それぞれ特徴があり、使用方法には注意が必要になります。
その点も合わせてご紹介したいと思います。

text-shadowを使う

text-shadowプロパティを使うことでテキストに縁取りをすることが出来ます。

p{
    text-shadow:
        1px 1px #dc5a45,
        1px 0 #dc5a45,
        0 1px #dc5a45,
        -1px -1px #dc5a45,
        -1px 0 #dc5a45,
        0 -1px #dc5a45;
}

実装サンプルはこちら。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

CSSで綺麗に縁取りが表現出来ていますね。

注意点

text-shadowプロパティを使う場合は注意が必要です。

上の例では綺麗に縁取り出来ていますが、text-shadowプロパティを使う場合、太い縁取りを作ろうとすると文字の角に違和感が出てきます。

その違和感を実際に見てみましょう。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

テキストの角の直角に縁取りされるため、テキストの角ががたがたしてしまいます。

text-shadowプロパティを使う場合、太い縁取りは不向きですね。。。

text-strokeを使う

text-strokeプロパティを使うことでもテキストに縁取りをすることが出来ます。

p{
    -webkit-text-stroke: 1px #3d8582;
    text-stroke: 1px #3d8582;
}

実装サンプルはこちら。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

text-strokeプロパティを使っても、CSSで綺麗に縁取りが表現出来ていますね。

注意点

text-strokeプロパティを使う場合も注意が必要です。

text-strokeプロパティの場合は、テキストの内側に縁取りがされます。
そのため、文字サイズが小さい場合や、太い縁取り線にしようとするとテキストが潰れてしまいます。

実際に見てみましょう。まずは文字サイズが小さい場合です。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

文字サイズが小さい場合、テキスト色よりも縁取り色が目立ってしまいます。
上の実装サンプルのテキスト色は白なんです。。。

続いて、太い縁取り線の場合です。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

こちらの場合も、特に細かい感じ部分が潰れてしまっています。。。

text-strokeプロパティを使う場合、文字サイズが小さい場合や、太い縁取りは不向きですね。。。

まとめ

いかがでしたか？
CSSだけでもテキストの縁取りを表現することが出来ました。
ただし、2024年6月時点ではCSSで作る縁取りは注意点もあることを頭に入れ、使っていくようにしましょう。
いづれ、デメリットの無い完璧な縁取りがCSSだけで出来る日が来るといいなと思います。