mask-border-sourceプロパティとは何ですか？

mask-border-sourceは、要素のボーダー領域に適用するマスク画像を指定するCSSプロパティです。PNG、SVG、またはCSSグラデーションを指定でき、指定した画像の透明度や輝度に基づいて要素のボーダー部分がマスクされます。

mask-border-sourceで使用できる画像形式は何ですか？

PNG（透明度を持つラスター画像）、SVG（スケーラブルなベクター画像）、およびCSSグラデーション（linear-gradient、radial-gradientなど）を使用できます。透明度情報を持つ画像が推奨されます。

mask-border-sourceとborder-image-sourceの違いは何ですか？

border-image-sourceは画像をボーダーとして表示するのに対し、mask-border-sourceは画像の透明度や輝度を使って要素を切り抜く（マスクする）効果を適用します。mask-border-sourceはより高度な視覚効果を実現できます。

【CSS】mask-border-sourceプロパティの使い方 - マスクボーダーの画像ソースを指定する

はじめに

この記事では、CSSのmask-border-sourceプロパティを使用して、要素のボーダー領域にマスク効果を適用するための画像ソースを指定する方法を解説します。基本的な画像の指定方法から、SVGやグラデーションを使った応用例まで、ステップバイステップで学んでいきましょう。

概要

mask-border-sourceは、CSSのプロパティで、mask-borderによるマスク効果に使用する画像を指定します。このプロパティで指定した画像は、mask-border-sliceによって9つの領域に分割され、要素のボーダー領域に適用されます。

マスク効果とは: 画像の透明度や輝度に基づいて、要素の一部を表示したり非表示にしたりする視覚効果です。透明な部分は見えなくなり、不透明な部分が表示されます。

mask-border-sourceはmask-borderプロパティ群の中核となるプロパティで、ここで指定した画像がマスクの基となります。

mask-border-sourceとは

mask-border-sourceプロパティは、マスクボーダーで使用する画像リソースを指定します。以下のような値を指定できます。

値の種類	説明	例
`none`	マスクボーダーを使用しない（デフォルト）	`mask-border-source: none;`
`url()`	画像ファイルへのパスを指定	`mask-border-source: url('border.png');`
`<gradient>`	CSSグラデーションを指定	`mask-border-source: linear-gradient(...);`

画像形式の選択

マスクボーダーに使用する画像形式によって、効果や用途が異なります。

形式	特徴	推奨用途
PNG	透明度（アルファチャンネル）をサポート	複雑なパターン、写真的な効果
SVG	ベクター形式、どのサイズでもシャープ	スケーラブルなパターン、アイコン的な装飾
グラデーション	外部ファイル不要、動的に生成	シンプルな効果、フェード効果

基本的な使い方

構文

/* デフォルト値：マスクボーダーなし */
mask-border-source: none;

/* 画像ファイルを指定 */
mask-border-source: url('mask-image.png');

/* SVGファイルを指定 */
mask-border-source: url('mask-pattern.svg');

/* グラデーションを指定 */
mask-border-source: linear-gradient(45deg, black, transparent);

/* インラインSVGを参照 */
mask-border-source: url('#svg-pattern-id');

シンプルな例

以下は、mask-border-sourceを使用した基本的な例です。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>mask-border-source 基本例</title>
  <style>
    .mask-box {
      width: 300px;
      height: 200px;
      padding: 20px;
      /* グラデーション背景 */
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

      /* === mask-border-source の設定 === */
      /* マスクに使用する画像を指定 */
      mask-border-source: url('decorative-border.png');
      /* 画像を30pxでスライス */
      mask-border-slice: 30;
      /* ボーダー幅を設定 */
      mask-border-width: 20px;
      /* スライスを引き伸ばして適用 */
      mask-border-repeat: stretch;

      /* Safari向けプレフィックス */
      -webkit-mask-border-source: url('decorative-border.png');
      -webkit-mask-border-slice: 30;
      -webkit-mask-border-width: 20px;
      -webkit-mask-border-repeat: stretch;
    }
  </style>
</head>
<body>
  <div class="mask-box">
    <p>mask-border-sourceで装飾されたコンテンツ</p>
  </div>
</body>
</html>

画像ファイルの指定

PNG画像を使用する

PNG画像は透明度（アルファチャンネル）をサポートしているため、マスクボーダーに最適です。

/* 透明度を持つPNG画像を使用 */
.png-mask {
  /* 装飾的なフレーム画像を指定 */
  mask-border-source: url('frame-border.png');
  mask-border-slice: 30;
  mask-border-width: 20px;
  mask-border-repeat: round;

  /* Safari向けプレフィックス */
  -webkit-mask-border-source: url('frame-border.png');
  -webkit-mask-border-slice: 30;
  -webkit-mask-border-width: 20px;
  -webkit-mask-border-repeat: round;
}

PNG画像作成のポイント:

表示したい部分を不透明（黒）に
非表示にしたい部分を透明に
9スライス分割を考慮したデザイン

WebP画像を使用する

WebP形式はPNGより軽量で、透明度もサポートしています。

/* WebP画像を使用（ファイルサイズが小さい） */
.webp-mask {
  mask-border-source: url('border-pattern.webp');
  mask-border-slice: 25;
  mask-border-width: 15px;

  -webkit-mask-border-source: url('border-pattern.webp');
  -webkit-mask-border-slice: 25;
  -webkit-mask-border-width: 15px;
}

相対パスと絶対パスの使用

/* 相対パス：CSSファイルからの相対位置 */
.relative-path {
  mask-border-source: url('../images/border.png');
}

/* 絶対パス：ルートからのパス */
.absolute-path {
  mask-border-source: url('/assets/images/border.png');
}

/* URL：外部リソース */
.external-url {
  mask-border-source: url('https://example.com/border.png');
}

SVG画像の指定

SVGはベクター形式なので、どのサイズでもシャープに表示されます。

外部SVGファイルを使用

/* 外部SVGファイルを参照 */
.svg-external {
  mask-border-source: url('decorative-frame.svg');
  mask-border-slice: 33.33%;
  mask-border-width: 20px;
  mask-border-repeat: round;

  -webkit-mask-border-source: url('decorative-frame.svg');
  -webkit-mask-border-slice: 33.33%;
  -webkit-mask-border-width: 20px;
  -webkit-mask-border-repeat: round;
}

インラインSVGを参照

HTMLに埋め込んだSVGを参照することもできます。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>インラインSVGマスクボーダー</title>
  <style>
    .inline-svg-mask {
      width: 300px;
      padding: 25px;
      background: linear-gradient(to right, #ff6b6b, #feca57);

      /* インラインSVGのIDを参照 */
      mask-border-source: url('#wave-border');
      mask-border-slice: 20;
      mask-border-width: 15px;
      mask-border-repeat: round;

      -webkit-mask-border-source: url('#wave-border');
      -webkit-mask-border-slice: 20;
      -webkit-mask-border-width: 15px;
      -webkit-mask-border-repeat: round;
    }
  </style>
</head>
<body>
  <!-- 画面には表示されないSVG定義 -->
  <svg width="0" height="0" style="position: absolute;">
    <defs>
      <!-- 波線パターンの定義 -->
      <pattern id="wave-border"
               width="60" height="60"
               patternUnits="userSpaceOnUse">
        <!-- 波線の描画 -->
        <path d="M0 30 Q15 0, 30 30 T60 30"
              stroke="black"
              stroke-width="4"
              fill="none"/>
        <!-- 上下の線 -->
        <line x1="0" y1="0" x2="60" y2="0"
              stroke="black" stroke-width="2"/>
        <line x1="0" y1="60" x2="60" y2="60"
              stroke="black" stroke-width="2"/>
      </pattern>
    </defs>
  </svg>

  <div class="inline-svg-mask">
    <p>SVGパターンを使った波線ボーダー</p>
  </div>
</body>
</html>

SVGマスク画像の作成例

マスクボーダー用のSVGファイルを作成する際のテンプレートです。

<!-- decorative-frame.svg -->
<svg xmlns="http://www.w3.org/2000/svg"
     width="90" height="90"
     viewBox="0 0 90 90">
  <!--
    黒い部分：表示される
    透明な部分：非表示になる
  -->

  <!-- 四隅の角丸装飾 -->
  <rect x="0" y="0" width="30" height="30" rx="10" fill="black"/>
  <rect x="60" y="0" width="30" height="30" rx="10" fill="black"/>
  <rect x="0" y="60" width="30" height="30" rx="10" fill="black"/>
  <rect x="60" y="60" width="30" height="30" rx="10" fill="black"/>

  <!-- 上下の辺 -->
  <rect x="30" y="0" width="30" height="10" fill="black"/>
  <rect x="30" y="80" width="30" height="10" fill="black"/>

  <!-- 左右の辺 -->
  <rect x="0" y="30" width="10" height="30" fill="black"/>
  <rect x="80" y="30" width="10" height="30" fill="black"/>
</svg>

グラデーションの指定

外部ファイルを使わず、CSSのグラデーションでマスクソースを作成できます。

linear-gradientを使用

/* 対角線方向のグラデーションマスク */
.linear-gradient-mask {
  width: 300px;
  height: 200px;
  background: white;

  /* グラデーションをマスクソースに */
  mask-border-source:
    linear-gradient(135deg,
      rgba(0, 0, 0, 1) 0%,      /* 左上: 完全に表示 */
      rgba(0, 0, 0, 0.5) 50%,   /* 中央: 半透明 */
      rgba(0, 0, 0, 1) 100%     /* 右下: 完全に表示 */
    );
  mask-border-slice: 1;
  mask-border-width: 10px;
  mask-border-repeat: stretch;

  -webkit-mask-border-source:
    linear-gradient(135deg,
      rgba(0, 0, 0, 1) 0%,
      rgba(0, 0, 0, 0.5) 50%,
      rgba(0, 0, 0, 1) 100%
    );
  -webkit-mask-border-slice: 1;
  -webkit-mask-border-width: 10px;
  -webkit-mask-border-repeat: stretch;
}

点線風のグラデーション

/* 点線風の効果をグラデーションで作成 */
.dotted-gradient {
  mask-border-source:
    linear-gradient(90deg,
      black 0%,
      black 20%,
      transparent 20%,
      transparent 40%,
      black 40%,
      black 60%,
      transparent 60%,
      transparent 80%,
      black 80%,
      black 100%
    );
  mask-border-slice: 1;
  mask-border-width: 5px;
  mask-border-repeat: repeat;

  -webkit-mask-border-source:
    linear-gradient(90deg,
      black 0%,
      black 20%,
      transparent 20%,
      transparent 40%,
      black 40%,
      black 60%,
      transparent 60%,
      transparent 80%,
      black 80%,
      black 100%
    );
  -webkit-mask-border-slice: 1;
  -webkit-mask-border-width: 5px;
  -webkit-mask-border-repeat: repeat;
}

radial-gradientを使用

/* 円形グラデーションでビネット風効果 */
.radial-gradient-mask {
  mask-border-source:
    radial-gradient(
      ellipse at center,
      transparent 0%,       /* 中央: 透明 */
      transparent 50%,
      black 70%,            /* 外側: 表示 */
      black 100%
    );
  mask-border-slice: 1 fill;
  mask-border-width: 30px;
  mask-border-repeat: stretch;

  -webkit-mask-border-source:
    radial-gradient(
      ellipse at center,
      transparent 0%,
      transparent 50%,
      black 70%,
      black 100%
    );
  -webkit-mask-border-slice: 1 fill;
  -webkit-mask-border-width: 30px;
  -webkit-mask-border-repeat: stretch;
}

repeating-linear-gradientを使用

/* ストライプパターンのマスク */
.stripe-mask {
  mask-border-source:
    repeating-linear-gradient(
      45deg,
      black 0px,
      black 10px,
      transparent 10px,
      transparent 20px
    );
  mask-border-slice: 1;
  mask-border-width: 15px;
  mask-border-repeat: round;

  -webkit-mask-border-source:
    repeating-linear-gradient(
      45deg,
      black 0px,
      black 10px,
      transparent 10px,
      transparent 20px
    );
  -webkit-mask-border-slice: 1;
  -webkit-mask-border-width: 15px;
  -webkit-mask-border-repeat: round;
}

実践的な使用例

装飾的なカードデザイン

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>装飾カード</title>
  <style>
    .decorative-card {
      width: 350px;
      padding: 30px;
      background: #fff;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);

      /* === エレガントなフレームマスク === */
      mask-border-source: url('elegant-frame.png');
      mask-border-slice: 40;
      mask-border-width: 25px;
      mask-border-repeat: round;

      -webkit-mask-border-source: url('elegant-frame.png');
      -webkit-mask-border-slice: 40;
      -webkit-mask-border-width: 25px;
      -webkit-mask-border-repeat: round;
    }

    .decorative-card h3 {
      margin: 0 0 15px;
      color: #333;
    }

    .decorative-card p {
      margin: 0;
      color: #666;
      line-height: 1.6;
    }
  </style>
</head>
<body>
  <div class="decorative-card">
    <h3>エレガントなカード</h3>
    <p>mask-border-sourceで指定した画像により、独自の装飾フレームを実現しています。</p>
  </div>
</body>
</html>

写真フレーム効果

.photo-frame {
  width: 400px;
  height: 300px;
  /* 写真を背景に設定 */
  background: url('photo.jpg') center/cover;

  /* === アンティーク調フレーム === */
  /* 装飾的なフレーム画像を指定 */
  mask-border-source: url('antique-frame.png');
  /* fillで中央領域（写真部分）も表示 */
  mask-border-slice: 60 fill;
  /* フレームの幅を大きめに設定 */
  mask-border-width: 50px;
  /* フレームを少し外側にはみ出させる */
  mask-border-outset: 10px;
  mask-border-repeat: stretch;

  -webkit-mask-border-source: url('antique-frame.png');
  -webkit-mask-border-slice: 60 fill;
  -webkit-mask-border-width: 50px;
  -webkit-mask-border-outset: 10px;
  -webkit-mask-border-repeat: stretch;
}

SVGを使った動的パターン

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>SVG動的パターン</title>
  <style>
    .dynamic-border {
      width: 320px;
      padding: 25px;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

      /* SVGパターンをマスクソースとして使用 */
      mask-border-source: url('#geometric-pattern');
      mask-border-slice: 25%;
      mask-border-width: 20px;
      mask-border-repeat: round;

      -webkit-mask-border-source: url('#geometric-pattern');
      -webkit-mask-border-slice: 25%;
      -webkit-mask-border-width: 20px;
      -webkit-mask-border-repeat: round;
    }
  </style>
</head>
<body>
  <!-- 幾何学パターンのSVG定義 -->
  <svg width="0" height="0" style="position: absolute;">
    <defs>
      <pattern id="geometric-pattern"
               width="40" height="40"
               patternUnits="userSpaceOnUse">
        <!-- ダイヤモンド形状 -->
        <polygon points="20,0 40,20 20,40 0,20"
                 fill="black"/>
      </pattern>
    </defs>
  </svg>

  <div class="dynamic-border">
    <p>幾何学パターンのマスクボーダー</p>
  </div>
</body>
</html>

フェードエッジ効果

/* ボーダー部分がフェードアウトする効果 */
.fade-edge {
  width: 300px;
  height: 200px;
  background: url('content-image.jpg') center/cover;

  /* グラデーションで外側をフェードアウト */
  mask-border-source:
    linear-gradient(
      to right,
      transparent 0%,
      black 30%,
      black 70%,
      transparent 100%
    );
  mask-border-slice: 1;
  mask-border-width: 40px;
  mask-border-repeat: stretch;

  -webkit-mask-border-source:
    linear-gradient(
      to right,
      transparent 0%,
      black 30%,
      black 70%,
      transparent 100%
    );
  -webkit-mask-border-slice: 1;
  -webkit-mask-border-width: 40px;
  -webkit-mask-border-repeat: stretch;
}

mask-border-sourceと他のプロパティの組み合わせ

mask-border-sourceは単独では効果がなく、他のmask-borderプロパティと組み合わせて使用します。

必須の組み合わせ

プロパティ	役割	必須/任意
`mask-border-source`	画像ソースを指定	必須
`mask-border-slice`	画像の分割方法を指定	必須
`mask-border-width`	ボーダーの幅を指定	推奨
`mask-border-repeat`	繰り返し方法を指定	任意
`mask-border-outset`	はみ出し量を指定	任意
`mask-border-mode`	マスクモードを指定	任意

完全な設定例

.complete-mask-border {
  width: 400px;
  padding: 30px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

  /* === mask-border の完全設定 === */

  /* 1. ソース画像を指定（必須） */
  mask-border-source: url('ornamental-frame.png');

  /* 2. スライス位置を指定（必須） */
  mask-border-slice: 30 fill;

  /* 3. ボーダー幅を指定（推奨） */
  mask-border-width: 20px;

  /* 4. はみ出し量を指定（任意） */
  mask-border-outset: 5px;

  /* 5. 繰り返し方法を指定（任意） */
  mask-border-repeat: round;

  /* 6. マスクモードを指定（任意） */
  mask-border-mode: alpha;

  /* Safari対応 */
  -webkit-mask-border-source: url('ornamental-frame.png');
  -webkit-mask-border-slice: 30 fill;
  -webkit-mask-border-width: 20px;
  -webkit-mask-border-outset: 5px;
  -webkit-mask-border-repeat: round;
}

ショートハンド記法での指定

/* ショートハンドで一括指定 */
.shorthand-example {
  /* source slice / width / outset repeat mode */
  mask-border: url('frame.png') 30 / 20px / 5px round alpha;

  -webkit-mask-border: url('frame.png') 30 / 20px / 5px round alpha;
}

noneの使用

mask-border-source: noneは、マスクボーダーを無効にする際に使用します。

/* 通常時はマスクボーダーを適用 */
.card {
  mask-border-source: url('border.png');
  mask-border-slice: 20;
  mask-border-width: 15px;

  -webkit-mask-border-source: url('border.png');
  -webkit-mask-border-slice: 20;
  -webkit-mask-border-width: 15px;
}

/* 特定の条件でマスクボーダーを無効化 */
.card.no-decoration {
  mask-border-source: none;
  -webkit-mask-border-source: none;
}

/* メディアクエリでレスポンシブに制御 */
@media (max-width: 768px) {
  .card {
    /* モバイルではマスクボーダーを無効化 */
    mask-border-source: none;
    -webkit-mask-border-source: none;
    /* 代わりに通常のボーダーを使用 */
    border: 2px solid #667eea;
    border-radius: 8px;
  }
}

ブラウザ対応とフォールバック

mask-border-sourceは比較的新しいプロパティで、ブラウザサポートに注意が必要です。

現在のブラウザ対応状況

ブラウザ	対応状況	備考
Safari	`-webkit-` プレフィックス付きで対応	最も安定したサポート
Chrome	部分的対応	フラグが必要な場合あり
Firefox	対応作業中	将来的にサポート予定
Edge	Chromiumベースは部分的対応	Chromeと同様

フォールバック付きの実装

.with-fallback {
  width: 300px;
  padding: 20px;

  /* === フォールバック: 通常のボーダー === */
  border: 3px solid #667eea;
  border-radius: 12px;
  background: white;

  /* === mask-borderをサポートするブラウザ向け === */
  @supports (-webkit-mask-border-source: url('')) {
    border: none;
    border-radius: 0;

    -webkit-mask-border-source: url('decorative-border.png');
    -webkit-mask-border-slice: 30;
    -webkit-mask-border-width: 15px;
    -webkit-mask-border-repeat: round;
  }

  @supports (mask-border-source: url('')) {
    border: none;
    border-radius: 0;

    mask-border-source: url('decorative-border.png');
    mask-border-slice: 30;
    mask-border-width: 15px;
    mask-border-repeat: round;
  }
}

プログレッシブエンハンスメント

/* Step 1: 基本スタイル（すべてのブラウザ） */
.enhanced-border {
  width: 300px;
  padding: 20px;
  background: white;
  border: 2px dashed #999;
}

/* Step 2: Safari対応 */
@supports (-webkit-mask-border-source: url('')) {
  .enhanced-border {
    border: none;
    -webkit-mask-border-source: url('fancy-border.png');
    -webkit-mask-border-slice: 25;
    -webkit-mask-border-width: 12px;
    -webkit-mask-border-repeat: round;
  }
}

/* Step 3: 標準仕様対応 */
@supports (mask-border-source: url('')) {
  .enhanced-border {
    border: none;
    mask-border-source: url('fancy-border.png');
    mask-border-slice: 25;
    mask-border-width: 12px;
    mask-border-repeat: round;
  }
}

使用上の注意点

画像の最適化

マスク画像のサイズと形式は、パフォーマンスに影響します。

/* 推奨: SVGまたは最適化された画像を使用 */
.optimized {
  /* SVG形式: ベクターなので軽量かつ高品質 */
  mask-border-source: url('optimized-border.svg');
  -webkit-mask-border-source: url('optimized-border.svg');
}

.optimized-webp {
  /* WebP形式: PNGより軽量 */
  mask-border-source: url('optimized-border.webp');
  -webkit-mask-border-source: url('optimized-border.webp');
}

/* 避けるべき: 大きすぎる画像 */
.not-recommended {
  /* NG: 大きなPNG画像はページを重くする */
  mask-border-source: url('large-border-4000x4000.png');
}

最適化のポイント:

SVG形式を優先して使用する
PNG/WebPを使う場合は適切なサイズにリサイズする
画像圧縮ツールで最適化する

マスク画像のデザイン

9スライス分割を考慮した画像デザインが重要です。

+-------+-------------------+-------+
|       |                   |       |
| 角丸   |     辺の装飾      | 角丸   |  ← 各コーナーは独立して使用される
|       |                   |       |
+-------+-------------------+-------+
|       |                   |       |
| 辺の   |     中央領域      | 辺の   |  ← 辺は繰り返しまたは引き伸ばされる
| 装飾   |  (fillで使用可)   | 装飾   |
+-------+-------------------+-------+
|       |                   |       |
| 角丸   |     辺の装飾      | 角丸   |  ← 9つの領域が連続するデザインに
|       |                   |       |
+-------+-------------------+-------+

アクセシビリティへの配慮

.accessible-design {
  /* マスクボーダーが機能しなくても内容は読める */
  mask-border-source: url('decorative.png');
  mask-border-slice: 20;
  mask-border-width: 10px;
  -webkit-mask-border-source: url('decorative.png');
  -webkit-mask-border-slice: 20;
  -webkit-mask-border-width: 10px;

  /* 十分なパディングで内容を保護 */
  padding: 30px;
}

まとめ

mask-border-sourceプロパティを使用することで、要素のボーダー領域に適用するマスク画像を柔軟に指定できます。

この記事で学んだこと

mask-border-sourceの基本: 画像ファイル、SVG、グラデーションの指定方法
画像形式の選択: PNG、SVG、グラデーションそれぞれの特徴と使い分け
SVGの活用: 外部ファイルとインラインSVGの参照方法
グラデーションの応用: 外部ファイル不要の動的なマスクパターン
ブラウザ対応: フォールバックとプログレッシブエンハンスメント

ポイント

柔軟な画像指定: PNG、SVG、グラデーションなど多様なソースに対応
SVGの推奨: スケーラブルで軽量なSVGが最適
グラデーション活用: 外部ファイル不要でシンプルな効果を実現
他のプロパティとの連携: mask-border-sliceなどと組み合わせて完全な効果を得る
ブラウザ対応: 現時点では限定的なため、フォールバックの用意が重要

mask-border-sourceを適切に活用することで、従来のCSSでは難しかった装飾的なボーダーデザインを実現できます。