Documentation CSS

概要

mask-border-outsetは、CSSのプロパティで、マスクボーダーが要素のボーダーボックス（border-box）からどれだけ外側にはみ出すかを指定します。このプロパティを使用することで、マスクボーダーを要素の境界を超えて拡張し、より広範囲にマスク効果を適用できます。

ボーダーボックス（border-box）とは、要素のボーダー（境界線）までを含む領域のことです。通常、マスクボーダーはこのボーダーボックス内に収まりますが、mask-border-outsetを使うと外側にはみ出させることができます。

mask-border-outsetの基本

プロパティの概要

mask-border-outsetは、mask-borderショートハンドプロパティの一部として、または単独で使用できます。border-image-outsetプロパティと同様の概念を持ち、マスク効果の適用範囲を拡張するために使用します。

構文

/* 単一の値（全方向に適用） */
mask-border-outset: <length> | <number>;

/* 2つの値（上下・左右） */
mask-border-outset: <length | number> <length | number>;

/* 3つの値（上・左右・下） */
mask-border-outset: <length | number> <length | number> <length | number>;

/* 4つの値（上・右・下・左） */
mask-border-outset: <length | number> <length | number> <length | number> <length | number>;

値の種類

値の種類説明例
<length>px、em、remなどの長さ単位10px, 1em, 0.5rem
<number>border-widthに対する倍数1, 1.5, 2

基本的な使い方

単一の値を指定

すべての辺に同じはみ出し量を適用します。

.mask-outset-example {
  /* マスクボーダーの基本設定 */
  mask-border-source: url('decorative-border.png');
  mask-border-slice: 30;
  mask-border-width: 15px;
  mask-border-repeat: round;

  /* 全方向に10pxはみ出し */
  mask-border-outset: 10px;

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

2つの値を指定（上下・左右）

上下と左右を別々に指定します。

.mask-outset-two-values {
  mask-border-source: url('border-pattern.png');
  mask-border-slice: 25;
  mask-border-width: 20px;

  /* 上下: 5px、左右: 15px */
  mask-border-outset: 5px 15px;

  /* Safari向けプレフィックス */
  -webkit-mask-border-outset: 5px 15px;
}

4つの値を指定（上・右・下・左）

各辺を個別に指定します。時計回りの順序（上から始まる）で指定します。

.mask-outset-four-values {
  mask-border-source: url('border-pattern.png');
  mask-border-slice: 30;
  mask-border-width: 15px;

  /* 上: 5px、右: 10px、下: 15px、左: 20px */
  mask-border-outset: 5px 10px 15px 20px;

  /* Safari向けプレフィックス */
  -webkit-mask-border-outset: 5px 10px 15px 20px;
}

数値（倍数）での指定

border-widthの倍数として指定できます。

.mask-outset-multiplier {
  border-width: 10px;  /* この値の倍数として計算される */

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

  /* border-widthの1.5倍 = 15px */
  mask-border-outset: 1.5;

  /* Safari向けプレフィックス */
  -webkit-mask-border-outset: 1.5;
}

実践的なコード例

写真フレームにはみ出し効果を追加

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>写真フレーム - mask-border-outset</title>
  <style>
    .photo-container {
      /* コンテナにマージンを設定してはみ出し分のスペースを確保 */
      margin: 30px;
    }

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

      /* マスクボーダーの設定 */
      mask-border-source: url('ornate-frame.png');
      mask-border-slice: 50 fill;
      mask-border-width: 30px;
      mask-border-repeat: stretch;
      /* 要素の外側に20pxはみ出す */
      mask-border-outset: 20px;

      /* Safari向けプレフィックス */
      -webkit-mask-border-source: url('ornate-frame.png');
      -webkit-mask-border-slice: 50 fill;
      -webkit-mask-border-width: 30px;
      -webkit-mask-border-repeat: stretch;
      -webkit-mask-border-outset: 20px;
    }
  </style>
</head>
<body>
  <div class="photo-container">
    <div class="photo-frame"></div>
  </div>
</body>
</html>

カードデザインでのはみ出し効果

.decorative-card {
  width: 300px;
  padding: 25px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  /* はみ出し分のマージンを確保 */
  margin: 20px;

  /* 装飾的なボーダーマスク */
  mask-border-source: url('card-border.svg');
  mask-border-slice: 20;
  mask-border-width: 12px;
  mask-border-repeat: round;
  /* 上下に多くはみ出し、左右は控えめに */
  mask-border-outset: 15px 8px;

  /* Safari向けプレフィックス */
  -webkit-mask-border-source: url('card-border.svg');
  -webkit-mask-border-slice: 20;
  -webkit-mask-border-width: 12px;
  -webkit-mask-border-repeat: round;
  -webkit-mask-border-outset: 15px 8px;
}

.decorative-card h3 {
  margin: 0 0 10px;
  font-size: 1.4rem;
}

.decorative-card p {
  margin: 0;
  line-height: 1.6;
}

インタラクティブなホバー効果

.interactive-element {
  width: 250px;
  padding: 20px;
  background: #f0f4f8;
  margin: 25px;
  transition: all 0.3s ease;

  /* 初期状態ではみ出しなし */
  mask-border-source: url('glow-border.png');
  mask-border-slice: 15;
  mask-border-width: 10px;
  mask-border-repeat: stretch;
  mask-border-outset: 0;

  /* Safari向けプレフィックス */
  -webkit-mask-border-source: url('glow-border.png');
  -webkit-mask-border-slice: 15;
  -webkit-mask-border-width: 10px;
  -webkit-mask-border-repeat: stretch;
  -webkit-mask-border-outset: 0;
}

.interactive-element:hover {
  /* ホバー時にはみ出しを拡大 */
  mask-border-outset: 10px;
  -webkit-mask-border-outset: 10px;
}

非対称なはみ出しデザイン

.asymmetric-border {
  width: 350px;
  height: 200px;
  background: #2d3748;
  color: white;
  padding: 30px;
  margin: 30px 20px 10px 25px;  /* はみ出し分を考慮 */

  mask-border-source: url('wave-pattern.svg');
  mask-border-slice: 40;
  mask-border-width: 25px;
  mask-border-repeat: round;
  /* 上: 大きく、右: 中程度、下: 小さく、左: 中程度 */
  mask-border-outset: 25px 15px 5px 20px;

  /* Safari向けプレフィックス */
  -webkit-mask-border-source: url('wave-pattern.svg');
  -webkit-mask-border-slice: 40;
  -webkit-mask-border-width: 25px;
  -webkit-mask-border-repeat: round;
  -webkit-mask-border-outset: 25px 15px 5px 20px;
}

ショートハンドでの使用

mask-borderショートハンドプロパティ内でoutsetを指定することもできます。

.shorthand-example {
  /* mask-border: source slice / width / outset repeat mode */
  mask-border:
    url('border.png')  /* source */
    30                 /* slice */
    / 20px             /* width */
    / 10px             /* outset */
    round              /* repeat */
    alpha;             /* mode */

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

/* 各辺で異なるoutsetを指定する場合 */
.shorthand-multi-outset {
  mask-border:
    url('border.png')
    25
    / 15px
    / 5px 10px 15px 20px  /* 上・右・下・左 */
    stretch;

  -webkit-mask-border:
    url('border.png') 25 / 15px / 5px 10px 15px 20px stretch;
}

レイアウトへの影響と注意点

はみ出し部分のスペース確保

mask-border-outsetではみ出したマスクボーダーは、要素のレイアウトサイズには影響しません。そのため、周囲の要素との重なりを防ぐには、適切なマージンを設定する必要があります。

.outset-with-margin {
  /* はみ出し量 */
  mask-border-outset: 15px;

  /* はみ出し分のマージンを確保 */
  margin: 15px;

  /* Safari向けプレフィックス */
  -webkit-mask-border-outset: 15px;
}

親要素のoverflow設定

親要素にoverflow: hiddenが設定されていると、はみ出した部分が切り取られる可能性があります。

/* 親要素 */
.parent-container {
  /* はみ出しを許可 */
  overflow: visible;
  /* または必要に応じてパディングを追加 */
  padding: 20px;
}

/* 子要素 */
.child-with-outset {
  mask-border-outset: 20px;
  -webkit-mask-border-outset: 20px;
}

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

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

  /* mask-border対応ブラウザ向け */
  @supports (mask-border-outset: 10px) or
            (-webkit-mask-border-outset: 10px) {
    border: none;

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

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

mask-border-outsetとborder-image-outsetの違い

特徴mask-border-outsetborder-image-outset
目的マスクボーダーのはみ出し制御ボーダー画像のはみ出し制御
効果透明度ベースのマスク効果画像をそのまま表示
適用対象マスク（切り抜き）効果ボーダー装飾
ブラウザ対応限定的広くサポート
/* border-image-outset: 装飾画像をボーダーとして表示 */
.border-image-example {
  border: 20px solid transparent;
  border-image-source: url('border-pattern.png');
  border-image-slice: 30;
  border-image-outset: 10px;  /* 画像がはみ出す */
}

/* mask-border-outset: マスク効果がはみ出す */
.mask-border-example {
  mask-border-source: url('border-pattern.png');
  mask-border-slice: 30;
  mask-border-width: 20px;
  mask-border-outset: 10px;  /* マスク効果がはみ出す */
}

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

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

.accessible-design {
  /* マスクボーダーが機能しなくてもコンテンツは読める */
  mask-border-source: url('decorative.png');
  mask-border-slice: 25;
  mask-border-width: 15px;
  mask-border-outset: 10px;

  /* 十分なパディングでコンテンツを保護 */
  padding: 35px;

  /* Safari向けプレフィックス */
  -webkit-mask-border-source: url('decorative.png');
  -webkit-mask-border-slice: 25;
  -webkit-mask-border-width: 15px;
  -webkit-mask-border-outset: 10px;
}

まとめ

mask-border-outsetプロパティを使用することで、マスクボーダーを要素のボーダーボックスを超えて拡張し、より表現力豊かなデザインを実現できます。

ポイント

  • はみ出し量の制御: 要素の外側にマスクボーダーを拡張できる
  • 柔軟な値指定: 長さ（px, em等）または数値（倍数）で指定可能
  • 個別の辺指定: 1〜4つの値で各辺を個別に制御
  • レイアウト非影響: はみ出し部分は要素サイズに影響しないため、マージンで調整が必要
  • ブラウザ対応: 現時点では限定的なため、プレフィックスとフォールバックを用意

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

参考文献

円