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

mask-border-repeatは、CSSのmask-borderプロパティでスライスされた画像片をボーダー領域にどのように繰り返すかを指定するプロパティです。stretch（引き伸ばし）、repeat（そのまま繰り返し）、round（サイズ調整して繰り返し）、space（スペースを入れて繰り返し）の4つの値があります。

mask-border-repeatのデフォルト値は何ですか？

mask-border-repeatのデフォルト値はstretchです。これはスライスされた画像片をボーダー領域に合わせて引き伸ばして表示します。

roundとrepeatの違いは何ですか？

repeatは画像をそのままのサイズで繰り返すため、端が途中で切れる可能性があります。一方、roundは画像が整数回繰り返されるようにサイズを調整するため、パターンが途中で切れることなく綺麗に表示されます。

【CSS】mask-border-repeatプロパティの使い方 - マスクボーダーの繰り返しパターンを制御する

はじめに

Webデザインにおいて、要素に装飾的なボーダーを適用する際、パターン画像をどのように繰り返すかは見た目の品質を大きく左右します。mask-border-repeatプロパティを使用することで、マスクボーダーのスライス画像の繰り返しパターンを細かく制御できます。

この記事では、mask-border-repeatの4つの値（stretch、repeat、round、space）の違いと使い分けを、具体的なコード例とともに解説します。パターンが途切れない美しいボーダーデザインを実現しましょう。

概要

mask-border-repeatは、mask-border-sliceでスライスされた画像片をボーダー領域にどのように配置するかを指定するプロパティです。ボーダーの長さに対してスライス画像をどのように繰り返すか、または引き伸ばすかを制御できます。

スライス画像とは: mask-border-sliceプロパティによって元画像から切り出された9つの領域（四隅、四辺、中央）のそれぞれの画像片のことです。

このプロパティを正しく理解することで、パターンの歪みや途切れのない美しいマスクボーダーを作成できます。

mask-border-repeatとは

mask-border-repeatプロパティは、スライスされた画像の辺（上下左右）の部分をどのように処理するかを決定します。四隅の画像は常にそのまま表示され、このプロパティは辺の部分にのみ影響します。

値の種類

値	説明	特徴
`stretch`	スライス画像をボーダー領域に合わせて引き伸ばします	デフォルト値。画像が歪む可能性あり
`repeat`	スライス画像を元のサイズのまま繰り返します	端が途中で切れる可能性あり
`round`	スライス画像が整数回繰り返されるようにサイズを調整します	パターンが途切れない（推奨）
`space`	スライス画像を元のサイズで繰り返し、余りを均等なスペースで分配します	画像間に隙間ができる

各値の視覚的な違い

stretch: |====画像を引き伸ばし====|
repeat:  |画像|画像|画像|画(切れる)|
round:   |調整画像|調整画像|調整画像|
space:   |画像| |画像| |画像|

基本的な使い方

構文

/* キーワード値（水平・垂直に同じ値を適用） */
mask-border-repeat: stretch;   /* 引き伸ばし（デフォルト） */
mask-border-repeat: repeat;    /* そのまま繰り返し */
mask-border-repeat: round;     /* サイズ調整して繰り返し */
mask-border-repeat: space;     /* スペースを入れて繰り返し */

/* 水平・垂直を個別に指定 */
mask-border-repeat: round stretch;  /* 水平: round, 垂直: stretch */
mask-border-repeat: repeat round;   /* 水平: repeat, 垂直: round */

/* グローバル値 */
mask-border-repeat: inherit;
mask-border-repeat: initial;
mask-border-repeat: revert;
mask-border-repeat: unset;

シンプルな例

以下は、mask-border-repeatの各値を比較する基本的な例です。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>mask-border-repeat 基本例</title>
  <style>
    /* 共通スタイル: すべてのカードに適用される基本設定 */
    .example {
      width: 300px;
      height: 150px;
      margin: 20px;
      padding: 20px;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      color: white;

      /* マスクボーダーの基本設定 */
      /* source: ボーダーに使用する画像 */
      mask-border-source: url('pattern-border.png');
      /* slice: 画像を9分割する際の切り取りサイズ（30px） */
      mask-border-slice: 30;
      /* width: ボーダーの表示幅 */
      mask-border-width: 20px;

      /* Safari向けベンダープレフィックス（現時点で必須） */
      -webkit-mask-border-source: url('pattern-border.png');
      -webkit-mask-border-slice: 30;
      -webkit-mask-border-width: 20px;
    }

    /* stretch: 画像を引き伸ばしてボーダー領域にフィット */
    /* 用途: グラデーションやシンプルな形状に最適 */
    .stretch-example {
      mask-border-repeat: stretch;
      -webkit-mask-border-repeat: stretch;
    }

    /* repeat: 元のサイズで繰り返し（端が切れる可能性あり） */
    /* 用途: タイル状パターン、アーティスティックなデザイン */
    .repeat-example {
      mask-border-repeat: repeat;
      -webkit-mask-border-repeat: repeat;
    }

    /* round: 整数回繰り返すようにサイズを自動調整 */
    /* 用途: 装飾パターン全般に推奨（パターンが途切れない） */
    .round-example {
      mask-border-repeat: round;
      -webkit-mask-border-repeat: round;
    }

    /* space: 元のサイズを維持しつつ、均等なスペースを挿入 */
    /* 用途: アイコンを等間隔に配置したい場合 */
    .space-example {
      mask-border-repeat: space;
      -webkit-mask-border-repeat: space;
    }
  </style>
</head>
<body>
  <div class="example stretch-example">
    <p>stretch: 画像を引き伸ばし</p>
  </div>

  <div class="example repeat-example">
    <p>repeat: そのまま繰り返し</p>
  </div>

  <div class="example round-example">
    <p>round: サイズ調整して繰り返し</p>
  </div>

  <div class="example space-example">
    <p>space: スペースを入れて繰り返し</p>
  </div>
</body>
</html>

stretchモードの詳細

stretchモードは、スライス画像をボーダー領域全体に引き伸ばして表示します。これはデフォルトの動作であり、明示的に指定しない場合に適用されます。

stretchモードの特徴

メリット	デメリット
パターンが途中で切れない	画像のアスペクト比が変わる
ボーダー領域に完全にフィット	細かいパターンが歪む可能性
設定がシンプル	繰り返しパターンには不向き

適したユースケース:

グラデーションをマスクボーダーとして使用する場合
シンプルな形状のフレーム
写真フレームなど、引き伸ばしても自然なデザイン

stretchモードの使用例

/* グラデーションパターンに最適 */
.gradient-border {
  width: 400px;
  height: 250px;
  background: #3498db;

  /* グラデーションマスク - stretchで滑らかに引き伸ばし */
  mask-border-source: linear-gradient(
    90deg,
    black 0%,
    transparent 50%,
    black 100%
  );
  mask-border-slice: 1;
  mask-border-width: 20px;
  /* stretch はパターンを引き伸ばすのでグラデーションに最適 */
  mask-border-repeat: stretch;

  /* Safari対応 */
  -webkit-mask-border-source: linear-gradient(
    90deg,
    black 0%,
    transparent 50%,
    black 100%
  );
  -webkit-mask-border-slice: 1;
  -webkit-mask-border-width: 20px;
  -webkit-mask-border-repeat: stretch;
}

/* シンプルな装飾フレーム */
.simple-frame {
  mask-border-source: url('simple-frame.png');
  mask-border-slice: 40;
  mask-border-width: 30px;
  /* フレーム画像を引き伸ばして適用 */
  mask-border-repeat: stretch;

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

repeatモードの詳細

repeatモードは、スライス画像を元のサイズのまま繰り返します。CSSのbackground-repeat: repeatと同様の動作です。

repeatモードの特徴

メリット	デメリット
画像のアスペクト比を維持	端が途中で切れる可能性
元のサイズで表示される	ボーダー幅に合わせた調整が必要
タイル状パターンに最適	パターンの整合性が崩れやすい

適したユースケース:

タイル状のドットパターン
アーティスティックなデザイン（端が切れても自然な場合）
元の画像サイズを厳密に維持したい場合

repeatモードの使用例

/* タイル状のドットパターン */
.dotted-border {
  width: 350px;
  height: 200px;
  background: #e74c3c;

  /* ドットパターンのマスク画像 */
  mask-border-source: url('dot-pattern.png');
  mask-border-slice: 20;
  mask-border-width: 15px;
  /* repeatでドットをそのまま繰り返す */
  mask-border-repeat: repeat;

  /* Safari対応 */
  -webkit-mask-border-source: url('dot-pattern.png');
  -webkit-mask-border-slice: 20;
  -webkit-mask-border-width: 15px;
  -webkit-mask-border-repeat: repeat;
}

/* 端が切れることを許容するデザイン */
.artistic-border {
  mask-border-source: url('brush-stroke.png');
  mask-border-slice: 25;
  mask-border-width: 20px;
  /* アーティスティックなデザインでは端が切れても自然 */
  mask-border-repeat: repeat;
}

注意点: repeatモードでは、ボーダー領域のサイズがスライス画像のサイズの整数倍でない場合、端が途中で切れます。これを避けたい場合はroundモードを使用してください。

roundモードの詳細

roundモードは、スライス画像が整数回繰り返されるようにサイズを調整します。多くの場合、最も推奨される値です。

roundモードの特徴

メリット	デメリット
パターンが途切れない	画像サイズが若干変わる
整数回繰り返されるよう自動調整	拡大/縮小による品質変化の可能性
美しいボーダーを実現しやすい	極端なサイズ差では効果が薄い

適したユースケース:

波線、星形、ハートなどの装飾パターン
ロゴやアイコンのパターン
パターンの整合性が重要なデザイン
一般的な装飾ボーダー全般（推奨）

roundモードの使用例

/* 波線パターンボーダー */
.wave-border {
  width: 400px;
  height: 250px;
  background: linear-gradient(to right, #11998e, #38ef7d);

  /* 波線パターンのマスク画像 */
  mask-border-source: url('wave-pattern.svg');
  mask-border-slice: 30;
  mask-border-width: 20px;
  /* round で波線が途切れないように調整 */
  mask-border-repeat: round;

  /* Safari対応 */
  -webkit-mask-border-source: url('wave-pattern.svg');
  -webkit-mask-border-slice: 30;
  -webkit-mask-border-width: 20px;
  -webkit-mask-border-repeat: round;
}

/* 星形パターンボーダー */
.star-border {
  mask-border-source: url('star-pattern.png');
  mask-border-slice: 25;
  mask-border-width: 15px;
  /* 星が途中で切れないように調整 */
  mask-border-repeat: round;

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

roundモードのサイズ調整の仕組み

ボーダー領域の幅: 100px
スライス画像の幅: 30px

repeat の場合:
  30px + 30px + 30px + 10px(切れる) = 100px
  → 3.33回繰り返し（端が切れる）

round の場合:
  100px / 30px = 3.33
  → 3回に調整（各画像は 33.3px に拡大）
  または
  → 4回に調整（各画像は 25px に縮小）
  ※ブラウザが近い方を選択

spaceモードの詳細

spaceモードは、スライス画像を元のサイズで繰り返し、余りを均等なスペースとして分配します。CSSのbackground-repeat: spaceと同様の動作です。

spaceモードの特徴

メリット	デメリット
画像サイズを維持	画像間に隙間ができる
画像が途中で切れない	連続パターンには不向き
均等な間隔で配置される	隙間の幅を直接制御できない

適したユースケース:

アイコンを等間隔に配置したい場合
余白のあるデザインが必要な場合
画像サイズを変えずに配置したい場合

spaceモードの使用例

/* アイコン間隔ボーダー */
.icon-spaced-border {
  width: 500px;
  height: 300px;
  background: #2c3e50;

  /* アイコンパターンのマスク画像 */
  mask-border-source: url('icon-pattern.png');
  mask-border-slice: 30;
  mask-border-width: 25px;
  /* spaceでアイコン間に均等なスペース */
  mask-border-repeat: space;

  /* Safari対応 */
  -webkit-mask-border-source: url('icon-pattern.png');
  -webkit-mask-border-slice: 30;
  -webkit-mask-border-width: 25px;
  -webkit-mask-border-repeat: space;
}

/* ダイヤモンドパターン */
.diamond-spaced-border {
  mask-border-source: url('diamond-pattern.svg');
  mask-border-slice: 20;
  mask-border-width: 15px;
  /* ダイヤモンド間に均等なスペース */
  mask-border-repeat: space;
}

spaceモードのスペース計算の仕組み

ボーダー領域の幅: 100px
スライス画像の幅: 30px

space の場合:
  100px / 30px = 3.33
  → 3回繰り返し（画像サイズは維持）
  残り: 100px - (30px × 3) = 10px
  → 10px / 4(隙間の数) = 2.5px のスペース

  [2.5px][画像30px][2.5px][画像30px][2.5px][画像30px][2.5px]

水平・垂直の個別指定

mask-border-repeatでは、水平方向と垂直方向で異なる繰り返し方法を指定できます。

構文

/* 2つの値を指定: 水平 垂直 */
mask-border-repeat: <水平の値> <垂直の値>;

個別指定の使用例

/* 水平: round、垂直: stretch */
.mixed-repeat-1 {
  width: 400px;
  height: 200px;
  background: #9b59b6;

  mask-border-source: url('pattern.png');
  mask-border-slice: 30;
  mask-border-width: 20px;
  /* 水平方向は整数回繰り返し、垂直方向は引き伸ばし */
  mask-border-repeat: round stretch;

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

/* 水平: stretch、垂直: round */
.mixed-repeat-2 {
  mask-border-repeat: stretch round;
  -webkit-mask-border-repeat: stretch round;
}

/* 水平: repeat、垂直: space */
.mixed-repeat-3 {
  mask-border-repeat: repeat space;
  -webkit-mask-border-repeat: repeat space;
}

使い分けの例

/* 横長のカードに最適な設定 */
.horizontal-card {
  width: 600px;
  height: 150px;

  mask-border-source: url('decorative-pattern.svg');
  mask-border-slice: 25;
  mask-border-width: 15px;
  /* 水平方向はパターンを繰り返し、垂直方向は引き伸ばし */
  mask-border-repeat: round stretch;

  -webkit-mask-border-source: url('decorative-pattern.svg');
  -webkit-mask-border-slice: 25;
  -webkit-mask-border-width: 15px;
  -webkit-mask-border-repeat: round stretch;
}

/* 縦長のサイドバーに最適な設定 */
.vertical-sidebar {
  width: 200px;
  height: 500px;

  mask-border-source: url('decorative-pattern.svg');
  mask-border-slice: 25;
  mask-border-width: 15px;
  /* 水平方向は引き伸ばし、垂直方向はパターンを繰り返し */
  mask-border-repeat: stretch round;

  -webkit-mask-border-source: url('decorative-pattern.svg');
  -webkit-mask-border-slice: 25;
  -webkit-mask-border-width: 15px;
  -webkit-mask-border-repeat: stretch round;
}

実践的な使用例

装飾的なカードデザイン

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>装飾カード - mask-border-repeat</title>
  <style>
    .decorative-card {
      width: 350px;
      padding: 30px;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      color: white;
      font-family: 'Noto Sans JP', sans-serif;

      /* 波線パターンのマスクボーダー */
      mask-border-source: url('wave-border.svg');
      mask-border-slice: 30;
      mask-border-width: 15px;
      /* round で波線パターンが途切れないように */
      mask-border-repeat: round;

      /* Safari対応 */
      -webkit-mask-border-source: url('wave-border.svg');
      -webkit-mask-border-slice: 30;
      -webkit-mask-border-width: 15px;
      -webkit-mask-border-repeat: round;
    }

    .decorative-card h3 {
      margin: 0 0 15px;
      font-size: 1.5rem;
    }

    .decorative-card p {
      margin: 0;
      line-height: 1.8;
    }
  </style>
</head>
<body>
  <div class="decorative-card">
    <h3>お知らせ</h3>
    <p>mask-border-repeatをroundに設定することで、波線パターンが途切れることなく美しく表示されます。</p>
  </div>
</body>
</html>

フォトフレーム効果

.photo-frame {
  width: 500px;
  height: 400px;
  background: url('scenic-photo.jpg') center/cover;

  /* アンティーク調フレームのマスク */
  mask-border-source: url('ornate-frame.png');
  mask-border-slice: 60 fill;  /* fillで中央も表示 */
  mask-border-width: 50px;
  mask-border-outset: 10px;
  /* stretchでフレームを引き伸ばして適用 */
  mask-border-repeat: stretch;

  /* Safari対応 */
  -webkit-mask-border-source: url('ornate-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>
    .svg-pattern-border {
      width: 400px;
      padding: 25px;
      background: linear-gradient(to right, #ff6b6b, #feca57);

      /* SVGパターンをマスクボーダーとして使用 */
      mask-border-source: url('#zigzag-pattern');
      mask-border-slice: 20;
      mask-border-width: 15px;
      /* roundでジグザグパターンを綺麗に繰り返す */
      mask-border-repeat: round;

      /* Safari対応 */
      -webkit-mask-border-source: url('#zigzag-pattern');
      -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="zigzag-pattern"
               width="40" height="40"
               patternUnits="userSpaceOnUse">
        <path d="M0 20 L10 10 L20 20 L30 10 L40 20"
              stroke="black"
              stroke-width="3"
              fill="none"/>
      </pattern>
    </defs>
  </svg>

  <div class="svg-pattern-border">
    <p>SVGのジグザグパターンをroundで綺麗に繰り返し</p>
  </div>
</body>
</html>

ショートハンド記法での使用

mask-borderショートハンドプロパティでは、repeatの値を指定できます。

/* ショートハンド記法 */
.shorthand-example {
  /* source / slice / width / outset repeat mode */
  mask-border:
    url('border.png')      /* source */
    30                     /* slice */
    / 20px                 /* width */
    / 5px                  /* outset */
    round;                 /* repeat */

  /* Safari対応 */
  -webkit-mask-border:
    url('border.png') 30 / 20px / 5px round;
}

/* 水平・垂直を個別に指定する場合 */
.shorthand-mixed {
  mask-border: url('border.png') 30 / 20px round stretch;
  -webkit-mask-border: url('border.png') 30 / 20px round stretch;
}

/* よく使う省略形 */
.common-shorthand {
  /* source, slice, width, repeat のみ指定 */
  mask-border: url('border.png') 25 / 15px round;
  -webkit-mask-border: url('border.png') 25 / 15px round;
}

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

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

現在のブラウザ対応状況

mask-border関連プロパティは実験的な機能であり、ブラウザのサポート状況に注意が必要です。

ブラウザ	対応状況	備考
Safari	対応	`-webkit-` プレフィックス必須
Chrome	部分的対応	フラグが必要な場合あり
Firefox	対応作業中	将来のバージョンで対応予定
Edge	部分的対応	Chromiumベース

実装時の注意点:

本番環境では必ずフォールバックを用意する
-webkit- プレフィックスを併記する
機能検出（@supports）を活用する

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

.with-fallback {
  /* フォールバック: 通常のボーダー */
  border: 3px solid #667eea;
  border-radius: 8px;

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

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

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

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

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

/* 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;
  }
}

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

各モードの使い分けガイド

どのモードを選択すべきか迷った場合は、以下のフローチャートを参考にしてください。

パターンが途切れてもよい？
├── はい → パターンサイズを維持したい？
│           ├── はい → repeat
│           └── いいえ → stretch
└── いいえ → 画像間に隙間が欲しい？
              ├── はい → space
              └── いいえ → round（推奨）

各モードの適用例

モード	最適なユースケース	避けるべきケース
`stretch`	グラデーション、シンプルなフレーム	細かいパターン、ロゴ
`repeat`	タイルパターン、アート風デザイン	完璧な繰り返しが必要な場合
`round`	装飾パターン全般（推奨）	厳密なサイズ維持が必要な場合
`space`	アイコンの等間隔配置	連続パターン

実践的な選択基準

迷ったらroundを選択: 多くの装飾ボーダーではroundが最も自然な結果を生み出します。パターンが途切れず、サイズの調整も自動で行われるため、最初の選択肢として推奨されます。

使用上の注意点

パフォーマンスへの配慮

/* 推奨: 適切なサイズの画像を使用 */
.optimized {
  /* SVG形式を推奨（軽量でスケーラブル） */
  mask-border-source: url('optimized-border.svg');
  mask-border-slice: 30;
  mask-border-width: 15px;
  mask-border-repeat: round;

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

/* 避けるべき: 大きすぎる画像 */
.not-recommended {
  /* 大きなPNG画像はパフォーマンスに影響 */
  mask-border-source: url('large-pattern-4000x4000.png');
}

アクセシビリティ

マスクボーダーは視覚的な装飾です。重要な情報を伝えるためにマスクに依存しないようにしましょう。

/* 装飾として使用（コンテンツに影響なし） */
.accessible-design {
  mask-border-source: url('decorative.png');
  mask-border-slice: 20;
  mask-border-width: 10px;
  mask-border-repeat: round;

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

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

まとめ

mask-border-repeatプロパティを使用することで、マスクボーダーのスライス画像の繰り返しパターンを細かく制御できます。

この記事で学んだこと

4つの繰り返しモード: stretch、repeat、round、spaceの特徴と違い
水平・垂直の個別指定: 2つの値で方向ごとに異なる繰り返し方法を指定
roundモードの推奨: パターンが途切れない美しいボーダーを実現
実践的な使用例: カードデザイン、フォトフレーム、SVGパターン

ポイント

デフォルトはstretch: 特に指定しない場合は引き伸ばしが適用される
roundを推奨: 一般的な装飾パターンにはroundが最適
水平・垂直を個別指定可能: レイアウトに合わせて柔軟に設定できる
ブラウザ対応: 現時点では限定的なため、フォールバックの用意が重要

今後のブラウザサポートの拡大により、mask-border-repeatはWebデザインにおける表現の幅をさらに広げる重要なプロパティになることが期待されます。

プロパティ	役割
`mask-border-source`	マスクボーダーに使用する画像を指定
`mask-border-slice`	画像を9つの領域にスライスする方法を指定
`mask-border-width`	マスクボーダーの幅を指定
`mask-border-outset`	マスクボーダーの外側への拡張量を指定
`mask-border-mode`	マスク画像の解釈方法を指定
`mask-border`	上記すべてを一括指定するショートハンド

はじめに

概要

mask-border-repeatとは

値の種類

各値の視覚的な違い

基本的な使い方

構文

シンプルな例

stretchモードの詳細

stretchモードの特徴

stretchモードの使用例

repeatモードの詳細

repeatモードの特徴

repeatモードの使用例

roundモードの詳細

roundモードの特徴

roundモードの使用例

roundモードのサイズ調整の仕組み

spaceモードの詳細

spaceモードの特徴

spaceモードの使用例

spaceモードのスペース計算の仕組み

水平・垂直の個別指定

構文

個別指定の使用例

使い分けの例

実践的な使用例

装飾的なカードデザイン

フォトフレーム効果

SVGパターンボーダー

ショートハンド記法での使用

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

現在のブラウザ対応状況

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

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

各モードの使い分けガイド

各モードの適用例

実践的な選択基準

使用上の注意点

パフォーマンスへの配慮

アクセシビリティ

まとめ

この記事で学んだこと

ポイント

関連プロパティ

参考文献