Documentation CSS

はじめに

この記事では、CSSのmask-border-widthプロパティを使用して、マスクボーダーの表示幅を制御する方法を解説します。mask-borderプロパティファミリーの中でも、見た目のサイズを決定する重要なプロパティです。

概要

mask-border-widthは、mask-border-sourceで指定したマスク画像が、要素のボーダー領域に表示される際の幅を指定するプロパティです。mask-border-sliceで分割された画像の各パーツが、この幅に合わせて拡大・縮小されて表示されます。

mask-border-sliceとの違い:

  • mask-border-slice: ソース画像をどこで切り分けるか（切り出し位置）
  • mask-border-width: 切り分けた画像をどのサイズで表示するか（表示サイズ）

このプロパティを理解することで、マスクボーダーのサイズを自在にコントロールできるようになります。

mask-border-widthとは

mask-border-widthプロパティは、マスクボーダーの上下左右の幅を指定します。border-widthと同様の概念で、要素の4辺それぞれに異なる幅を設定できます。

┌────────────────────────────────────────┐
│              上の幅 (top)              │
├───────┬──────────────────────┬─────────┤
│       │                      │         │
│ 左の幅 │      コンテンツ       │  右の幅  │
│(left) │                      │ (right) │
│       │                      │         │
├───────┴──────────────────────┴─────────┤
│             下の幅 (bottom)            │
└────────────────────────────────────────┘

基本的な使い方

構文

/* 単一の値：全ての辺に同じ幅を適用 */
mask-border-width: 20px;

/* 2つの値：上下 / 左右 */
mask-border-width: 10px 20px;

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

/* 4つの値：上 / 右 / 下 / 左（時計回り） */
mask-border-width: 10px 15px 20px 25px;

/* autoキーワード */
mask-border-width: auto;

値の種類

値の形式説明例
長さ（length）px、em、remなどの単位で幅を指定20px, 1.5em
パーセンテージ要素の対応する寸法に対する割合10%
数値（number）mask-border-sliceの値の倍数として解釈2
automask-border-sliceの値をそのまま使用auto

シンプルな例

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

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

      /* マスクボーダーの設定 */
      /* ソース画像を指定 */
      mask-border-source: url('frame-mask.png');
      /* 画像を30でスライス */
      mask-border-slice: 30;
      /* 表示幅を20pxに設定 */
      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-widthで幅を指定したコンテンツ</p>
  </div>
</body>
</html>

長さ指定の詳細

ピクセル値での指定

最も一般的な指定方法です。固定のピクセル値でマスクボーダーの幅を設定します。

/* すべての辺に20pxの幅を適用 */
.example-pixels {
  mask-border-source: url('border-mask.png');
  mask-border-slice: 30;
  /* 固定のピクセル幅 */
  mask-border-width: 20px;

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

相対単位での指定

emやremを使用すると、フォントサイズに応じた幅を設定できます。

/* emを使用：親要素のフォントサイズに応じて変化 */
.example-em {
  font-size: 16px;
  mask-border-source: url('border-mask.png');
  mask-border-slice: 30;
  /* 16px × 1.5 = 24pxとして計算される */
  mask-border-width: 1.5em;

  -webkit-mask-border-source: url('border-mask.png');
  -webkit-mask-border-slice: 30;
  -webkit-mask-border-width: 1.5em;
}

/* remを使用：ルート要素のフォントサイズに応じて変化 */
.example-rem {
  mask-border-source: url('border-mask.png');
  mask-border-slice: 30;
  /* ルートのフォントサイズ × 1.25 */
  mask-border-width: 1.25rem;

  -webkit-mask-border-source: url('border-mask.png');
  -webkit-mask-border-slice: 30;
  -webkit-mask-border-width: 1.25rem;
}

4辺を個別に指定

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

/* 4辺すべてに異なる幅を指定 */
.example-four-values {
  mask-border-source: url('asymmetric-border.png');
  mask-border-slice: 30 40 50 40;
  /* 上: 15px、右: 20px、下: 25px、左: 20px */
  mask-border-width: 15px 20px 25px 20px;

  -webkit-mask-border-source: url('asymmetric-border.png');
  -webkit-mask-border-slice: 30 40 50 40;
  -webkit-mask-border-width: 15px 20px 25px 20px;
}

省略記法

2つまたは3つの値で効率的に指定できます。

/* 2つの値：上下 / 左右 */
.example-two-values {
  mask-border-source: url('border-mask.png');
  mask-border-slice: 30;
  /* 上下: 15px、左右: 25px */
  mask-border-width: 15px 25px;

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

/* 3つの値：上 / 左右 / 下 */
.example-three-values {
  mask-border-source: url('border-mask.png');
  mask-border-slice: 30;
  /* 上: 10px、左右: 20px、下: 30px */
  mask-border-width: 10px 20px 30px;

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

パーセンテージ指定

パーセンテージを使用すると、要素のサイズに応じた相対的な幅を設定できます。

/* 要素のサイズに対する相対幅 */
.example-percent {
  width: 400px;
  height: 300px;
  mask-border-source: url('border-mask.png');
  mask-border-slice: 30;
  /* 上下: 要素の高さの5%、左右: 要素の幅の5% */
  mask-border-width: 5%;

  -webkit-mask-border-source: url('border-mask.png');
  -webkit-mask-border-slice: 30;
  -webkit-mask-border-width: 5%;
}

パーセンテージの計算方法

辺計算基準
上・下要素の高さに対するパーセンテージ
左・右要素の幅に対するパーセンテージ
/* 計算例：400px × 300px の要素の場合 */
.example-percent-calculation {
  width: 400px;
  height: 300px;
  mask-border-source: url('border-mask.png');
  mask-border-slice: 30;
  /* 上下: 300px × 10% = 30px */
  /* 左右: 400px × 5% = 20px */
  mask-border-width: 10% 5%;

  -webkit-mask-border-source: url('border-mask.png');
  -webkit-mask-border-slice: 30;
  -webkit-mask-border-width: 10% 5%;
}

数値（number）指定

数値（単位なし）を指定すると、mask-border-sliceの値の倍数として解釈されます。

/* slice値の倍数として幅を計算 */
.example-number {
  mask-border-source: url('border-mask.png');
  /* sliceが30の場合 */
  mask-border-slice: 30;
  /* 30 × 1.5 = 45px として計算 */
  mask-border-width: 1.5;

  -webkit-mask-border-source: url('border-mask.png');
  -webkit-mask-border-slice: 30;
  -webkit-mask-border-width: 1.5;
}

/* 整数値での指定 */
.example-integer {
  mask-border-source: url('border-mask.png');
  mask-border-slice: 20;
  /* 20 × 2 = 40px として計算 */
  mask-border-width: 2;

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

数値指定のメリット

  • mask-border-sliceと連動して幅を調整できる
  • スライス画像の比率を維持しやすい
  • 画像の元のアスペクト比を保った拡大・縮小が可能

autoキーワード

autoを指定すると、mask-border-sliceの値がそのまま幅として使用されます。

/* autoを使用：sliceの値をそのまま幅として使用 */
.example-auto {
  mask-border-source: url('border-mask.png');
  /* sliceが30の場合、widthも30pxになる */
  mask-border-slice: 30;
  mask-border-width: auto;

  -webkit-mask-border-source: url('border-mask.png');
  -webkit-mask-border-slice: 30;
  -webkit-mask-border-width: auto;
}

/* 辺ごとにautoと他の値を混在 */
.example-auto-mixed {
  mask-border-source: url('border-mask.png');
  mask-border-slice: 20 30 20 30;
  /* 上: auto(20px)、右: 40px、下: auto(20px)、左: 40px */
  mask-border-width: auto 40px auto 40px;

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

autoが便利な場面

  • ソース画像のオリジナルサイズを維持したい場合
  • sliceとwidthを同じ値にしたい場合
  • 画像の歪みを防ぎたい場合

実践的な使用例

装飾的なカードデザイン

カードコンポーネントに高級感のあるフレームを適用する例です。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>装飾カード</title>
  <style>
    .luxury-card {
      width: 350px;
      padding: 40px;
      background: linear-gradient(to bottom, #f8f9fa, #e9ecef);
      text-align: center;

      /* === マスクボーダーの設定 === */
      /* 豪華なフレーム画像を使用 */
      mask-border-source: url('gold-frame.png');
      /* 画像を45pxでスライス */
      mask-border-slice: 45;
      /* フレームを大きめに表示（30px幅） */
      mask-border-width: 30px;
      /* パターンを整数回繰り返す */
      mask-border-repeat: round;

      /* Safari対応 */
      -webkit-mask-border-source: url('gold-frame.png');
      -webkit-mask-border-slice: 45;
      -webkit-mask-border-width: 30px;
      -webkit-mask-border-repeat: round;
    }

    .luxury-card h2 {
      margin: 0 0 15px;
      color: #333;
      font-family: serif;
    }

    .luxury-card p {
      margin: 0;
      color: #666;
      line-height: 1.6;
    }
  </style>
</head>
<body>
  <div class="luxury-card">
    <h2>プレミアムプラン</h2>
    <p>豪華なマスクボーダーで高級感を演出したカードデザインです。</p>
  </div>
</body>
</html>

レスポンシブなマスクボーダー

画面サイズに応じてマスクボーダーの幅を調整する例です。

.responsive-border {
  width: 100%;
  max-width: 500px;
  padding: 25px;
  background: linear-gradient(135deg, #667eea, #764ba2);

  mask-border-source: url('border-pattern.png');
  mask-border-slice: 30;
  /* デフォルト：モバイル向けの小さい幅 */
  mask-border-width: 10px;
  mask-border-repeat: round;

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

/* タブレット以上 */
@media (min-width: 768px) {
  .responsive-border {
    mask-border-width: 20px;
    -webkit-mask-border-width: 20px;
  }
}

/* デスクトップ */
@media (min-width: 1024px) {
  .responsive-border {
    mask-border-width: 30px;
    -webkit-mask-border-width: 30px;
  }
}

非対称なフレームデザイン

上部を強調した非対称なフレームを作成する例です。

.header-accent {
  width: 400px;
  padding: 30px;
  background: white;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);

  mask-border-source: url('header-accent-mask.png');
  /* 上部を大きくスライス */
  mask-border-slice: 60 20 10 20;
  /* 上部を大きな幅で表示、他は控えめに */
  mask-border-width: 50px 15px 8px 15px;
  mask-border-repeat: stretch;

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

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

グラデーションをマスクソースとして使用する例です。

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

  /* グラデーションをマスクとして使用 */
  mask-border-source: linear-gradient(
    to right,
    black 0%,           /* 完全に表示 */
    transparent 30%,    /* フェードアウト */
    transparent 70%,    /* 透明 */
    black 100%          /* 完全に表示 */
  );
  mask-border-slice: 1;
  /* グラデーションの幅を調整 */
  mask-border-width: 40px;
  mask-border-repeat: stretch;

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

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

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

プロパティ役割関係性
mask-border-sourceマスク画像を指定幅が適用されるソース
mask-border-slice画像のスライス位置widthがautoの場合の参照元
mask-border-width表示幅を指定本プロパティ
mask-border-outsetはみ出し量widthとは独立して加算
mask-border-repeat繰り返し方法widthに合わせて調整される

完全な設定例

.complete-mask-border {
  width: 400px;
  padding: 35px;
  background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);

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

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

  /* 2. スライス位置（上下30、左右40、中央も使用） */
  mask-border-slice: 30 40 fill;

  /* 3. 表示幅（上下25px、左右30px） */
  mask-border-width: 25px 30px;

  /* 4. はみ出し量（外側に5px） */
  mask-border-outset: 5px;

  /* 5. 繰り返し方法（整数回で繰り返し） */
  mask-border-repeat: round;

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

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

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

現在の対応状況

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

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

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

  /* === フォールバック：通常のボーダー === */
  border: 15px solid transparent;
  border-image: url('border-image.png') 30 round;
  background: white;

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

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

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

    mask-border-source: url('mask-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: 3px solid #667eea;
  border-radius: 8px;
}

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

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

使用上の注意点

sliceとwidthのバランス

mask-border-sliceとmask-border-widthの値のバランスが重要です。

/* 推奨：sliceとwidthのバランスが良い */
.balanced {
  mask-border-slice: 30;
  /* sliceと同程度か、少し大きめの値 */
  mask-border-width: 30px;
}

/* 注意：widthがsliceより極端に大きい場合 */
.stretched {
  mask-border-slice: 20;
  /* 画像が大きく引き伸ばされ、ぼやける可能性 */
  mask-border-width: 60px;
}

/* 注意：widthがsliceより極端に小さい場合 */
.compressed {
  mask-border-slice: 50;
  /* 画像が圧縮され、ディテールが失われる可能性 */
  mask-border-width: 10px;
}

パフォーマンスへの配慮

/* 推奨：適切なサイズのマスク画像を使用 */
.optimized {
  mask-border-source: url('optimized-mask.svg');
  mask-border-slice: 30;
  mask-border-width: 20px;

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

/* 避けるべき：大きすぎる画像 + 小さいwidth */
.not-recommended {
  /* 2000pxの画像を20pxに縮小するのは非効率 */
  mask-border-source: url('huge-mask-2000x2000.png');
  mask-border-slice: 500;
  mask-border-width: 20px;
}

アクセシビリティの考慮

/* マスクボーダーは装飾として使用 */
.accessible-design {
  mask-border-source: url('decorative.png');
  mask-border-slice: 25;
  mask-border-width: 15px;

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

  /* 十分なパディングを確保 */
  /* マスクボーダーでテキストが隠れないように */
  padding: 30px;
}

まとめ

mask-border-widthプロパティは、マスクボーダーの表示サイズを制御する重要なプロパティです。

ポイント

  • 複数の指定方法: 長さ、パーセンテージ、数値、autoから選択可能
  • 4辺の個別指定: 上下左右それぞれに異なる幅を設定できる
  • sliceとの連携: 数値やautoを使うとslice値と連動した幅指定が可能
  • レスポンシブ対応: メディアクエリと組み合わせて画面サイズに応じた調整ができる
  • ブラウザ対応: 現時点では限定的なため、フォールバックの用意が重要

mask-border-widthを適切に設定することで、マスクボーダーの見た目を精密にコントロールし、洗練されたデザインを実現できます。

参考文献

円