Documentation CSS

概要

mask-border-sliceは、CSSのプロパティで、mask-border-sourceで指定したマスク画像を9つの領域（9-slice）に分割する方法を指定します。この分割により、画像の四隅はそのまま保持され、四辺は引き伸ばしたり繰り返したりすることで、任意のサイズの要素に対して美しいマスクボーダーを実現できます。

9-slice（ナインスライス）とは、画像を上・下・左・右・四隅・中央の9つの領域に分割する手法です。この手法は、ボタンやパネルなど、サイズが可変の要素に対して装飾画像を適用する際によく使われます。

mask-border-sliceとは

mask-border-sliceプロパティは、ソース画像をスライスする位置を指定します。スライスされた画像は以下の9つの領域に分割されます。

┌─────────┬─────────────────┬─────────┐
│  1      │        2        │      3  │
│ 左上    │       上        │    右上 │
├─────────┼─────────────────┼─────────┤
│         │                 │         │
│  4      │    5 (中央)     │      6  │
│  左     │                 │     右  │
├─────────┼─────────────────┼─────────┤
│  7      │        8        │      9  │
│ 左下    │       下        │    右下 │
└─────────┴─────────────────┴─────────┘
領域説明
1, 3, 7, 9四隅の領域（サイズ固定）
2, 8上下の辺（水平方向に伸縮）
4, 6左右の辺（垂直方向に伸縮）
5中央領域（デフォルトでは破棄、fillで使用可能）

基本的な使い方

構文

/* 単一の値：全ての辺に同じ値を適用 */
mask-border-slice: 30;

/* 2つの値：上下 / 左右 */
mask-border-slice: 20 30;

/* 3つの値：上 / 左右 / 下 */
mask-border-slice: 10 20 30;

/* 4つの値：上 / 右 / 下 / 左（時計回り） */
mask-border-slice: 10 20 30 40;

/* fillキーワード付き */
mask-border-slice: 30 fill;

値の種類

値の形式説明
数値（単位なし）ピクセル単位でスライス位置を指定（ラスター画像の場合）
パーセンテージ画像サイズに対する割合でスライス位置を指定
fill中央領域（領域5）を破棄せずに使用する

シンプルな例

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

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

      /* マスクボーダーの設定 */
      mask-border-source: url('frame-mask.png');
      /* 全方向30ピクセルでスライス */
      mask-border-slice: 30;
      mask-border-width: 20px;
      mask-border-repeat: stretch;

      /* Safari向けプレフィックス */
      -webkit-mask-border-source: url('frame-mask.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-sliceで装飾されたコンテンツ</p>
  </div>
</body>
</html>

数値指定の詳細

ピクセル値での指定

数値は単位なしで指定し、ラスター画像の場合はピクセル単位として解釈されます。

/* 100x100の画像を使用する場合 */
.example-pixels {
  mask-border-source: url('border-100x100.png');

  /* 画像の端から30ピクセルの位置でスライス */
  /* 結果：四隅は30x30ピクセル、辺は40ピクセルの領域 */
  mask-border-slice: 30;
}

4辺を個別に指定

上・右・下・左の順（時計回り）で異なる値を指定できます。

.example-four-values {
  mask-border-source: url('asymmetric-border.png');

  /* 上: 10px、右: 20px、下: 30px、左: 40px */
  mask-border-slice: 10 20 30 40;
  mask-border-width: 15px;
}

2辺または3辺の指定

省略記法を使用して、効率的に値を指定できます。

/* 2つの値：上下 / 左右 */
.example-two-values {
  /* 上下: 20px、左右: 30px */
  mask-border-slice: 20 30;
}

/* 3つの値：上 / 左右 / 下 */
.example-three-values {
  /* 上: 10px、左右: 25px、下: 15px */
  mask-border-slice: 10 25 15;
}

パーセンテージ指定

パーセンテージを使用すると、画像サイズに対する相対的な位置でスライスできます。

/* 画像サイズの30%の位置でスライス */
.example-percent {
  mask-border-source: url('flexible-border.png');
  mask-border-slice: 30%;
}

/* 異なるパーセンテージで各辺を指定 */
.example-percent-mixed {
  /* 上下: 25%、左右: 33% */
  mask-border-slice: 25% 33%;
}

パーセンテージ vs 数値の使い分け

状況推奨
画像サイズが固定の場合数値（ピクセル）
複数サイズの画像を使う場合パーセンテージ
SVG画像を使用する場合パーセンテージ
/* SVG画像ではパーセンテージが推奨 */
.svg-border {
  mask-border-source: url('border-pattern.svg');
  /* SVGはスケーラブルなのでパーセンテージが適切 */
  mask-border-slice: 33.33%;
}

fillキーワードの活用

fillキーワードを追加すると、通常は破棄される中央領域（領域5）がマスクの背景として使用されます。

fillなしとfillありの違い

/* fillなし：中央領域は透明（破棄される） */
.without-fill {
  mask-border-source: url('frame-mask.png');
  mask-border-slice: 30;
  mask-border-width: 20px;
  /* 中央部分は元の背景がそのまま見える */
}

/* fillあり：中央領域もマスクとして使用 */
.with-fill {
  mask-border-source: url('frame-mask.png');
  mask-border-slice: 30 fill;
  mask-border-width: 20px;
  /* 中央部分もマスク画像の中央領域で覆われる */
}

fillの実践例：フレーム効果

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>fill キーワードの効果</title>
  <style>
    .container {
      display: flex;
      gap: 40px;
      padding: 20px;
    }

    .photo-frame {
      width: 300px;
      height: 200px;
      background: url('photo.jpg') center/cover;
    }

    /* fillなし：フレームのみ */
    .frame-only {
      mask-border-source: url('ornate-frame.png');
      mask-border-slice: 40;
      mask-border-width: 30px;

      -webkit-mask-border-source: url('ornate-frame.png');
      -webkit-mask-border-slice: 40;
      -webkit-mask-border-width: 30px;
    }

    /* fillあり：フレーム＋中央のビネット効果 */
    .frame-with-vignette {
      mask-border-source: url('vignette-frame.png');
      /* fillで中央領域のグラデーションも適用 */
      mask-border-slice: 40 fill;
      mask-border-width: 30px;

      -webkit-mask-border-source: url('vignette-frame.png');
      -webkit-mask-border-slice: 40 fill;
      -webkit-mask-border-width: 30px;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="photo-frame frame-only">
      <!-- フレームの内側は写真がそのまま見える -->
    </div>
    <div class="photo-frame frame-with-vignette">
      <!-- フレーム＋中央にビネット効果 -->
    </div>
  </div>
</body>
</html>

実践的な使用例

装飾的なカードデザイン

.decorative-card {
  width: 350px;
  padding: 30px;
  background: linear-gradient(to bottom right, #ffecd2, #fcb69f);

  /* アールデコ風のフレームマスク */
  mask-border-source: url('art-deco-frame.png');
  /* 画像の角を大きめにスライス */
  mask-border-slice: 50;
  mask-border-width: 25px;
  mask-border-repeat: round;

  /* Safari対応 */
  -webkit-mask-border-source: url('art-deco-frame.png');
  -webkit-mask-border-slice: 50;
  -webkit-mask-border-width: 25px;
  -webkit-mask-border-repeat: round;
}

非対称なボーダーデザイン

.asymmetric-border {
  width: 400px;
  padding: 25px;
  background: #fff;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);

  /* 上部に大きな装飾、他は小さめ */
  mask-border-source: url('header-accent.png');
  /* 上: 60px（大きな装飾）、右: 20px、下: 10px、左: 20px */
  mask-border-slice: 60 20 10 20;
  mask-border-width: 40px 15px 8px 15px;

  -webkit-mask-border-source: url('header-accent.png');
  -webkit-mask-border-slice: 60 20 10 20;
  -webkit-mask-border-width: 40px 15px 8px 15px;
}

SVGを使用したスケーラブルなマスク

SVGを使用すると、どんなサイズでもシャープなマスクボーダーを実現できます。

<!-- インラインSVGでマスク画像を定義 -->
<svg width="0" height="0" style="position: absolute;">
  <defs>
    <symbol id="corner-mask" viewBox="0 0 90 90">
      <!-- 角丸の装飾パターン -->
      <path d="M0 30 Q0 0 30 0 L60 0 Q90 0 90 30 L90 60 Q90 90 60 90 L30 90 Q0 90 0 60 Z"
            fill="black"/>
    </symbol>
  </defs>
</svg>

<style>
  .svg-mask-border {
    width: 300px;
    padding: 20px;
    background: linear-gradient(45deg, #12c2e9, #c471ed, #f64f59);

    mask-border-source: url('#corner-mask');
    /* SVGではパーセンテージが効果的 */
    mask-border-slice: 33.33%;
    mask-border-width: 15px;

    -webkit-mask-border-source: url('#corner-mask');
    -webkit-mask-border-slice: 33.33%;
    -webkit-mask-border-width: 15px;
  }
</style>

グラデーションとの組み合わせ

.gradient-frame {
  width: 320px;
  height: 180px;
  background: url('landscape.jpg') center/cover;

  /* グラデーションをマスクソースとして使用 */
  mask-border-source:
    linear-gradient(
      to right,
      black 0%,
      transparent 20%,
      transparent 80%,
      black 100%
    );
  mask-border-slice: 1;
  mask-border-width: 30px;

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

mask-border-sliceと関連プロパティ

mask-border-sliceは他のmask-borderプロパティと組み合わせて使用します。

プロパティ役割
mask-border-sourceマスク画像を指定
mask-border-slice画像のスライス位置を指定
mask-border-widthマスクボーダーの表示幅を指定
mask-border-outsetボーダーボックスからのはみ出し量
mask-border-repeatスライスの繰り返し方法

完全な設定例

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

  /* ソース画像 */
  mask-border-source: url('ornamental-frame.png');

  /* スライス：上下25px、左右30px、中央も使用 */
  mask-border-slice: 25 30 fill;

  /* 表示幅：上下20px、左右25px */
  mask-border-width: 20px 25px;

  /* 要素の外側に5pxはみ出し */
  mask-border-outset: 5px;

  /* スライスを整数回で繰り返す */
  mask-border-repeat: round;

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

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

mask-border-sliceは比較的新しいプロパティで、ブラウザサポートが限られています。

現在の対応状況

ブラウザ対応状況
Safari-webkit- プレフィックス付きで対応
Chrome部分的対応
Firefox対応作業中
EdgeChromiumベースは部分的対応

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

.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('fancy-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('fancy-border.png');
    mask-border-slice: 30;
    mask-border-width: 15px;
    mask-border-repeat: round;
  }
}

使用上の注意点

画像サイズとスライス値の関係

スライス値は画像サイズを超えないように注意が必要です。

/* 100x100の画像の場合 */
.correct-slice {
  /* OK: 30 + 30 = 60 < 100 */
  mask-border-slice: 30;
}

.incorrect-slice {
  /* NG: 60 + 60 = 120 > 100（画像サイズを超える） */
  /* 予期しない結果になる可能性がある */
  mask-border-slice: 60;
}

パフォーマンスへの配慮

/* 推奨：適切なサイズの画像を使用 */
.optimized {
  /* SVGまたは適切なサイズのPNGを使用 */
  mask-border-source: url('optimized-mask.svg');
  mask-border-slice: 33.33%;
}

/* 避けるべき：大きすぎる画像 */
.not-recommended {
  /* 大きな画像はパフォーマンスに影響 */
  mask-border-source: url('huge-mask-2000x2000.png');
  mask-border-slice: 500;
}

まとめ

mask-border-sliceプロパティは、マスクボーダー用の画像を9つの領域に分割し、要素のサイズに応じて柔軟に適用するための重要なプロパティです。

ポイント

  • 9-slice分割: 画像を四隅、四辺、中央の9つの領域に分割
  • 柔軟な値指定: 数値（ピクセル）またはパーセンテージで指定可能
  • fillキーワード: 中央領域もマスクとして使用する場合に追加
  • SVGとの相性: スケーラブルなマスクにはSVGとパーセンテージ指定が最適
  • ブラウザ対応: 現時点では限定的なため、フォールバックの用意が重要

mask-border-sliceを適切に使用することで、どんなサイズの要素にも美しく適応する装飾的なマスクボーダーを実現できます。

参考文献

円