-webkit-text-stroke

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since April 2017.

-webkit-text-strokeCSS のプロパティで、テキスト文字の輪郭線のを指定します。これは個別指定プロパティ -webkit-text-stroke-width および -webkit-text-stroke-color の一括指定プロパティです。

css
/* 幅と色の値 */
-webkit-text-stroke: 4px navy;
text-stroke: 4px navy;

/* グローバル値 */
-webkit-text-stroke: inherit;
-webkit-text-stroke: initial;
-webkit-text-stroke: revert;
-webkit-text-stroke: revert-layer;
-webkit-text-stroke: unset;

構成要素のプロパティ

このプロパティは以下の CSS プロパティの一括指定です。

構文

<length>

輪郭線の幅です。

<color>

輪郭線の色です。

公式定義

初期値一括指定の次の各プロパティとして
適用対象すべての要素
継承あり
計算値一括指定の次の各プロパティとして
アニメーションの種類一括指定の次の各プロパティとして

形式文法

-webkit-text-stroke = 
<line-width> ||
<color>

<line-width> =
<length [0,∞]> |
thin |
medium |
thick

テキストに赤い輪郭線を追加

HTML

html
<p id="example">このテキストの輪郭線は赤です。</p>

CSS

css
#example {
  font-size: 3em;
  margin: 0;
  -webkit-text-stroke: 2px red;
}

結果

仕様書

Specification
Compatibility
# the-webkit-text-stroke

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
-webkit-text-stroke

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

関連情報