CSSで文字縁取り

2025/08/05

たまに使うけど思い出せない文字縁取りですが、-webkit-text-strokeを使えば解決します。

ぼかしたい場合は便利なジェネレーターを使っており、このあとご紹介します。

縁取り文字について

まずは縁取り文字を作成してみましょう。

 p {
  background-color: green;
  font-size: 50px;
  width: fit-content;
  padding-inline: 1em;
  
  color: black;
  -webkit-text-stroke: 2px white;
}

-webkit-text-strokeの2pxの部分で縁取りの厚さを指定、あとのwhiteの部分で色を指定します。

文字をtransparentにすると縁取りのみにできます。

文字サイズが小さい場合は縁取りの厚さを気を付けないと、文字が潰れてしまいます。

縁取りをぼかしたい場合

p {
  background-color: green;
  font-size: 50px;
  width: fit-content;
  padding-inline: 1em;
  
  color: black;
  text-shadow: 
     1px  1px 6px #ffffff,
    -1px  1px 6px #ffffff,
     1px -1px 6px #ffffff,
    -1px -1px 6px #ffffff,
     1px  0px 6px #ffffff,
     0px  1px 6px #ffffff,
    -1px  0px 6px #ffffff,
     0px -1px 6px #ffffff;
}

こちらも厚さに注意しないと潰れてしまうのでご注意ください。ただジェネレーターで作成するので微調整は簡単ですけどね。

ホームページのパーツ作成サイト　https://webparts.cman.jp/string/outline/