CSSで作る文字の縁取り！text-shadow・text-stroke・ぼかし・2重アウトライン

方法１「-webkit-text-stroke」

See the Pen css-text-outline-webkit-text-stroke by webmagic-lab (@kkindchy-the-selector) on CodePen.

  .stroke {
    -webkit-text-stroke: 0.1em #000;
    paint-order: stroke;
  }

CSSの-webkit-text-strokeプロパティは、文字のアウトラインの幅と色を指定することができます。
アウトラインの幅にはem、rem、px等の単位が使えて、色も16進数やRGB等基本的に何でも使えます。
今回ご紹介する縁取りの方法としては一番簡単な方法ですが、いくつか欠点もあります。

個人的に縁取りの設定をするときには、emで設定することをオススメします。
emで設定しておけばテキストサイズが小さくなったりして変わっても違和感がありません。

▼豆知識

「-webkit-text-stroke」と似た「text-stroke」があります。
見た目でこっちの方が標準に見えますが、「text-stroke」はまだ正式採用されてない “非標準プロパティ”となっていて2025年11月現在では使用することができません。

「-webkit-text-stroke」の欠点：太くすると文字がつぶれるブラウザがある

-webkit-text-strokeで縁取りの幅を増やすと、文字がつぶれるという現象が起こります。
これは縁取りする基準がテキストのフチになり、この基準を元に内側・外側両方に縁取りを太くしていくためです。

今回は「テキスト内部が塗りつぶされるように見える」対策の為、文字の描画順序を制御するプロパティであるpaint-order: stroke;を設定しておくことで、本来

1. 塗りつぶし（fill）→ 文字の中の色
2. 縁取り（stroke）→ 文字の輪郭

の順で色がぬられている順番を

1. 縁取り（stroke）→ 文字の輪郭
2. 塗りつぶし（fill）→ 文字の中の色

にすることで文字のつぶれを回避しています。

しかし、paint-orderはChrome / Safari / Firefox等の一部のバージョンで非対応になっている為、描画順序の変更が行われず文字がつぶれて見えてしまうことがあります。
その為、テキストに対して1px~2pxの縁取りでおさめておくのが無難です。

▼現在の対応状況

https://caniuse.com/?search=paint-order

「-webkit-text-stroke」の欠点：フォントによっては謎の線がはいる

-webkit-text-strokeは、フォントの「ベクター輪郭」をそのまま太らせるだけなので、輪郭（パス）が複雑なフォントだと上記のように線が入ってしまうことがあります。
特に日本語フォントは部品が多いので、複雑な漢字等は線が入りがちです。

▼今回縁取りで謎の線が入ったフォント一覧

• Roboto Flex
• Noto Sans JP
• Inter

方法2「text-shadow」

See the Pen css-text-outline-webkit-text-shadow by webmagic-lab (@kkindchy-the-selector) on CodePen.

.stroke {
    color: #acd0ff;
    text-shadow:
      4px 0 0 #000,
      -4px 0 0 #000,
      0 4px 0 #000,
      0 -4px 0 #000,
      3px 3px 0 #000,
      -3px -3px 0 #000,
      -3px 3px 0 #000,
      3px -3px 0 #000;
  }

CSSのtext-shadowプロパティは、文字の影の水平・垂直方向のずれ、ぼかしの半径、影の色を指定することができます。
これを複数方向に指定することで、文字の縁取りをしているかのように見せることができます。
-webkit-text-strokeとは違い、テキストの影を利用している為、フォントによるパスの線が見えることはありませんし、文字がつぶれることもありません。
-webkit-text-strokeが実装される前まではtext-shadowで縁取りするのが一般的でした。

「text-shadow」の欠点：太くすると角がガタつく

text-shadowプロパティで縁取りをするには、影を複数方向にしなければなりません。
その為、指定する影が少ないと角が滑らかにならず、ガタつきが生まれてしまいます。

その上、上記画像のようにある程度滑らかにしようと思うと、下記コードのように長くなってしまいます。

.stroke {
    text-shadow:
      15px 0 0 #000,
      -15px 0 0 #000,
      0 15px 0 #000,
      0 -15px 0 #000,
      10px 10px 0 #000,
      -10px -10px 0 #000,
      -10px 10px 0 #000,
      10px -10px 0 #000,
      7px 13px 0 #000,
      -7px 13px 0 #000,
      13px 7px 0 #000,
      -13px 7px 0 #000,
      13px -7px 0 #000,
      -13px -7px 0 #000,
      7px -13px 0 #000,
      -7px -13px 0 #000;
  }

方法3「SVG filter」

See the Pen css-text-outline-webkit-svg by webmagic-lab (@kkindchy-the-selector) on CodePen.

テキストに縁取りをつけたいけど、-webkit-text-strokeやtext-shadowだとブラウザ対応や角のガタつきが気になる…そんな時に使えるのが SVGフィルター を使った縁取りです。
SVGで縁取りの形を作り、CSSの filter でテキストに適用する仕組みになっています。

<feMorphology in="SourceAlpha" operator="dilate" radius="3" result="dilated" />
operator="dilate" で文字の輪郭を外側に広げます。
この広がった部分が縁取りになり、radiusの値を大きくすると縁取りが太くなります。

<feFlood flood-color="#000000" result="outlineColor" />
flood-color で縁取りの色を指定します。

<feMerge><feMergeNode in="dilated" /><feMergeNode in="SourceGraphic" /></feMerge>
feMerge で縁取り（<feMergeNode in="dilated" />）と元の文字（<feMergeNode in="SourceGraphic" />）を重ねることで、縁取りしたテキストのフィルターが完成します。

filter: url(#outline-dilate);
作ったSVGフィルターをCSSで呼び出してテキストに適用します。

▼補足

• SVGの配置は、HTML内のどこに置いてもOKです（テキストの前でも後でも動作します）
• 縁取りの色や太さをCSSだけで変更することはできません。SVG内で指定する必要があります。
• そのため、-webkit-text-stroke や text-shadow に比べると設定は少し面倒ですが、角のガタつきやブラウザ差の問題を回避できます

縁取り応用編

縁取りの方法をご紹介したところで、実際のサイトデザインにも使える応用編をご紹介します。

ぼかした縁取り

See the Pen css-text-outline-blur-stroke by webmagic-lab (@kkindchy-the-selector) on CodePen.

文字の縁取りを柔らかく見せたい場合、text-shadowでぼかしを加える方法があります。
ぼかしなので、縁取りで気になっていたギザギザは気になりません。

二重の縁取り

See the Pen css-text-outline-double-outline by webmagic-lab (@kkindchy-the-selector) on CodePen.

SVGフィルターを使う方法であれば綺麗に2重の縁取りをすることも可能です。

グラデーションの縁取り

See the Pen css-text-outline-gradient-outline-wrap by webmagic-lab (@kkindchy-the-selector) on CodePen.

テキストを2つ記述する必要がありますが、その分文字がつぶれる心配はありません。

ふくろ文字

See the Pen Untitled by webmagic-lab (@kkindchy-the-selector) on CodePen.

SVGフィルターで縁取りしたときの応用で、テキスト部分を足すのではなく引くことでふくろ文字も実装できます。

まとめ

縁取りの方法についてざっくりまとめましたがいかがだったでしょうか。
SVG filterの方法が一番きれいに表示できるのかなと思いつつ、記述が多くてめんどくさいし、SVGのfilterやtext-shadowだと重ねすぎたり複雑だったりするとモバイルとかで見た時に負荷がかかりそうで悩みどころです。
-webkit-text-stroke + paint-order: stroke;が早く標準化してくれないかなと願うばかりです。