はじめに
この記事では、CSSのmask-borderプロパティを使用して、要素のボーダー領域に装飾的なマスク効果を適用する方法を解説します。基本的な概念から実践的な使用例まで、ステップバイステップで学んでいきましょう。
概要
mask-borderは、CSSのプロパティで、要素のボーダー領域に画像やグラデーションを使ったマスク効果を適用するためのショートハンドプロパティです。border-imageプロパティと似た概念を持ちますが、マスク（透明度による切り抜き効果）として機能する点が特徴です。
マスク効果とは: 画像の透明度や輝度に基づいて、要素の一部を表示したり非表示にしたりする視覚効果です。透明な部分は見えなくなり、不透明な部分が表示されます。
このプロパティを使用することで、従来の単純な線形ボーダーでは表現できなかった、装飾的で視覚的にインパクトのあるボーダーデザインを実現できます。
mask-borderとは
mask-borderプロパティは、以下の6つの個別プロパティのショートハンド（省略形）です。これらを一つの宣言でまとめて指定できます。
| プロパティ | 説明 |
|---|---|
mask-border-source | マスクに使用する画像を指定 |
mask-border-slice | ソース画像をスライスする方法を指定（9スライス技法） |
mask-border-width | マスクボーダーの幅を指定 |
mask-border-outset | ボーダーボックスからのはみ出し量を指定 |
mask-border-repeat | スライスの繰り返し方法を指定 |
mask-border-mode | マスクのモード（alpha/luminance）を指定 |
9スライス技法とは: 画像を9つの領域（四隅、四辺、中央）に分割し、それぞれを個別に処理する手法です。これにより、画像のサイズを変えても角の部分が歪まずに表示できます。
基本的な使い方
構文
/* 基本構文 */
.element {
mask-border: <source> <slice> / <width> / <outset> <repeat> <mode>;
}
/* 実際の使用例 */
.decorated-box {
/* ソース画像を指定 */
mask-border-source: url('border-mask.png');
/* 画像を9分割するスライス値 */
mask-border-slice: 30;
/* ボーダーの幅 */
mask-border-width: 20px;
/* 繰り返し方法 */
mask-border-repeat: round;
}シンプルな例
以下は、mask-borderを使用して要素にマスクボーダーを適用する基本的な例です。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>mask-border 基本例</title>
<style>
.mask-border-example {
width: 300px;
height: 200px;
padding: 20px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
/* mask-border の設定 */
/* ソース画像（装飾的なボーダーパターン） */
mask-border-source: url('decorative-border.png');
/* 画像を30ピクセルでスライス */
mask-border-slice: 30;
/* ボーダー幅を15ピクセルに設定 */
mask-border-width: 15px;
/* スライスを均等に引き伸ばし */
mask-border-repeat: stretch;
/* Safari向けプレフィックス */
-webkit-mask-border-source: url('decorative-border.png');
-webkit-mask-border-slice: 30;
-webkit-mask-border-width: 15px;
-webkit-mask-border-repeat: stretch;
}
</style>
</head>
<body>
<div class="mask-border-example">
<p>mask-borderで装飾されたコンテンツ</p>
</div>
</body>
</html>各プロパティの詳細
mask-border-source
マスクに使用する画像を指定します。PNG、SVG、またはグラデーションを使用できます。透明度情報を持つ画像を使用することで、様々なマスク効果を実現できます。
/* PNG画像を使用 - 透明度を持つPNGが推奨 */
.example1 {
mask-border-source: url('mask-pattern.png');
}
/* SVG画像を使用 - ベクター形式なので拡大縮小に強い */
.example2 {
mask-border-source: url('mask-pattern.svg');
}
/* グラデーションを使用 - 動的なマスク効果が可能 */
.example3 {
/* 黒（不透明）から透明へのグラデーション */
mask-border-source: linear-gradient(45deg, black, transparent);
}
/* 複数の色を使ったグラデーション */
.example4 {
mask-border-source: linear-gradient(
90deg,
black 0%, /* 完全に表示 */
transparent 50%, /* 完全に非表示 */
black 100% /* 完全に表示 */
);
}mask-border-slice
ソース画像を9つの領域にスライスする方法を指定します。border-image-sliceと同様の概念です。
スライスの仕組み: 指定した値の位置で画像を上下左右から切り込みを入れ、9つの領域に分割します。
+-------+-------------------+-------+
| 左上 | 上 | 右上 | ← スライス値（上）
+-------+-------------------+-------+
| | | |
| 左 | 中央 | 右 |
| | | |
+-------+-------------------+-------+
| 左下 | 下 | 右下 | ← スライス値（下）
+-------+-------------------+-------+
↑ ↑
スライス値（左） スライス値（右）/* 数値で指定（ピクセル） */
.example1 {
/* 上下左右すべて30pxでスライス */
mask-border-slice: 30;
}
/* パーセンテージで指定 */
.example2 {
/* 画像の30%の位置でスライス */
mask-border-slice: 30%;
}
/* 上下・左右を個別に指定 */
.example3 {
/* 上下: 20px、左右: 30px */
mask-border-slice: 20 30;
}
/* 4辺を個別に指定（時計回り：上、右、下、左） */
.example4 {
/* 上: 10、右: 20、下: 30、左: 40 */
mask-border-slice: 10 20 30 40;
}
/* fill キーワードで中央領域も使用 */
.example5 {
/* スライス + 中央領域を表示（通常は透明になる部分も表示） */
mask-border-slice: 30 fill;
}mask-border-width
マスクボーダーの幅を指定します。
/* ピクセル値で指定 */
.example1 {
mask-border-width: 20px;
}
/* パーセンテージで指定 */
.example2 {
/* 要素の幅に対するパーセンテージ */
mask-border-width: 5%;
}
/* autoを使用（sliceの値に基づく） */
.example3 {
mask-border-width: auto;
}
/* 4辺を個別に指定 */
.example4 {
/* 上: 10px、右: 20px、下: 30px、左: 40px */
mask-border-width: 10px 20px 30px 40px;
}mask-border-outset
マスクボーダーがボーダーボックスからはみ出す量を指定します。
/* 要素の外側にはみ出す */
.example1 {
/* 全方向に10pxはみ出し */
mask-border-outset: 10px;
}
/* 4辺を個別に指定 */
.example2 {
/* 上: 5px、右: 10px、下: 15px、左: 20px */
mask-border-outset: 5px 10px 15px 20px;
}mask-border-repeat
スライスされた画像の繰り返し方法を指定します。ボーダーの長さに合わせて、スライスした画像片をどのように配置するかを制御します。
/* stretch: 引き伸ばす（デフォルト）
- スライス画像をボーダー領域に合わせて伸縮
- シンプルだが、パターンが歪む可能性あり */
.example1 {
mask-border-repeat: stretch;
}
/* repeat: そのまま繰り返す
- スライス画像を元のサイズで繰り返し
- 端が途中で切れる可能性あり */
.example2 {
mask-border-repeat: repeat;
}
/* round: 整数回繰り返すように調整
- 画像が途中で切れないようサイズを調整
- パターンの整合性を保ちたい場合に最適 */
.example3 {
mask-border-repeat: round;
}
/* space: 均等にスペースを入れて繰り返す
- 画像間に均等なスペースを挿入
- 余白のあるデザインに適している */
.example4 {
mask-border-repeat: space;
}
/* 水平・垂直を個別に指定 */
.example5 {
/* 水平方向: round（整数回繰り返し）、垂直方向: stretch（引き伸ばし） */
mask-border-repeat: round stretch;
}各値の視覚的な違い:
| 値 | 特徴 | 適した用途 |
|---|---|---|
stretch | 伸縮して埋める | シンプルな装飾 |
repeat | そのまま繰り返す | タイル状のパターン |
round | サイズ調整して繰り返す | 綺麗なパターン表示 |
space | スペースを入れて繰り返す | 間隔のあるデザイン |
mask-border-mode
マスクの解釈方法を指定します。画像のどの情報を使ってマスク効果を適用するかを決定します。
アルファチャンネルとは: 画像の透明度情報を格納するチャンネルです。PNG画像などで使用されます。
輝度（ルミナンス）とは: 画像の明るさの度合いです。白に近いほど明るく、黒に近いほど暗くなります。
/* alpha: アルファチャンネルを使用（デフォルト） */
.example1 {
/* 画像の透明度に基づいてマスク */
/* 透明部分 → 非表示、不透明部分 → 表示 */
mask-border-mode: alpha;
}
/* luminance: 輝度値を使用 */
.example2 {
/* 画像の明るさに基づいてマスク */
/* 白い部分 → 表示、黒い部分 → 非表示 */
/* グレースケール画像でのマスクに最適 */
mask-border-mode: luminance;
}modeの選び方:
| モード | 適した画像タイプ | 用途 |
|---|---|---|
alpha | 透明度を持つPNG/SVG | 一般的なマスク効果 |
luminance | グレースケール画像 | 写真ベースのマスク |
実践的な使用例
以下の例では、実際のWebサイトで使えるデザインパターンを紹介します。
装飾的なカードデザイン
カードコンポーネントに独自のボーダーパターンを適用する例です。
<!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 の設定 === */
/* 1. マスクに使用する画像を指定 */
mask-border-source: url('wave-border.svg');
/* 2. 画像を20pxの位置でスライス */
mask-border-slice: 20;
/* 3. ボーダーの幅を10pxに設定 */
mask-border-width: 10px;
/* 4. パターンを整数回繰り返すように調整 */
mask-border-repeat: round;
/* Safari向けプレフィックス（必須） */
-webkit-mask-border-source: url('wave-border.svg');
-webkit-mask-border-slice: 20;
-webkit-mask-border-width: 10px;
-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を使用して、カードに独自の装飾ボーダーを適用しています。</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: 50 fill;
/* フレームの幅を大きめに設定 */
mask-border-width: 40px;
/* 要素の外側に10pxはみ出させる（立体感を演出） */
mask-border-outset: 10px;
/* フレームパターンを引き伸ばして適用 */
mask-border-repeat: stretch;
/* Safari向けプレフィックス */
-webkit-mask-border-source: url('antique-frame.png');
-webkit-mask-border-slice: 50 fill;
-webkit-mask-border-width: 40px;
-webkit-mask-border-outset: 10px;
-webkit-mask-border-repeat: stretch;
}
/* ホバー時のエフェクト（オプション） */
.photo-frame:hover {
/* outsetを大きくして浮き上がる効果 */
mask-border-outset: 15px;
-webkit-mask-border-outset: 15px;
transition: mask-border-outset 0.3s ease;
}SVGを使用したカスタムボーダー
SVGを使用すると、より柔軟なマスクパターンを作成できます。ベクター形式なので、どのサイズでも綺麗に表示されます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>SVGマスクボーダー</title>
<style>
.svg-border {
width: 300px;
padding: 25px;
/* グラデーション背景 */
background: linear-gradient(to right, #ff6b6b, #feca57);
/* SVGパターンをマスクボーダーとして使用 */
mask-border-source: url('#wave-pattern');
mask-border-slice: 20;
mask-border-width: 15px;
mask-border-repeat: round;
/* Safari向けプレフィックス */
-webkit-mask-border-source: url('#wave-pattern');
-webkit-mask-border-slice: 20;
-webkit-mask-border-width: 15px;
-webkit-mask-border-repeat: round;
}
</style>
</head>
<body>
<!-- インラインSVGでマスクパターンを定義 -->
<!-- 画面には表示されないが、CSSから参照可能 -->
<svg width="0" height="0" style="position: absolute;">
<defs>
<!-- 波線パターンの定義 -->
<pattern id="wave-pattern"
width="40" height="40"
patternUnits="userSpaceOnUse">
<!-- ベジェ曲線で波線を描画 -->
<!-- M: 開始点、Q: 二次ベジェ曲線、T: 滑らかな二次ベジェ曲線 -->
<path d="M0 20 Q10 0, 20 20 T40 20"
stroke="black"
stroke-width="4"
fill="none"/>
</pattern>
</defs>
</svg>
<div class="svg-border">
<p>SVGパターンを使った波線ボーダー</p>
</div>
</body>
</html>SVGマスクのメリット:
- 解像度に依存しない（Retinaディスプレイでも綺麗）
- ファイルサイズが小さい
- CSSで色の変更が可能（fill、strokeプロパティ）
グラデーションボーダー効果
外部画像を使わず、CSSのグラデーションだけでマスクボーダーを作成する例です。
.gradient-border {
width: 300px;
height: 200px;
background: white;
position: relative;
/* === グラデーションをマスクボーダーとして使用 === */
/* 対角線方向のグラデーションでフェード効果を演出 */
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% /* 右下: 完全に表示 */
);
/* sliceを1に設定（グラデーション全体を使用） */
mask-border-slice: 1;
/* ボーダー幅 */
mask-border-width: 5px;
/* グラデーションを引き伸ばす */
mask-border-repeat: stretch;
/* Safari向けプレフィックス */
-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: 5px;
-webkit-mask-border-repeat: stretch;
}
/* バリエーション: 点滅するようなパターン */
.dotted-gradient-border {
mask-border-source:
linear-gradient(90deg,
rgba(0, 0, 0, 1) 0%, /* 表示 */
rgba(0, 0, 0, 0) 25%, /* 非表示 */
rgba(0, 0, 0, 1) 50%, /* 表示 */
rgba(0, 0, 0, 0) 75%, /* 非表示 */
rgba(0, 0, 0, 1) 100% /* 表示 */
);
mask-border-slice: 1;
mask-border-width: 8px;
mask-border-repeat: stretch;
}ショートハンド記法
複数のプロパティを一行でまとめて指定できます。記述が簡潔になり、コードの可読性も向上します。
ショートハンドの構文
mask-border: <source> <slice> / <width> / <outset> <repeat> <mode>;各値はスラッシュ（/）で区切ります。
/* 完全なショートハンド記法 */
.shorthand-example {
mask-border:
url('border.png') /* source: マスク画像 */
30 /* slice: スライス値 */
/ 20px /* width: ボーダー幅（スラッシュ後） */
/ 5px /* outset: はみ出し量（スラッシュ後） */
round /* repeat: 繰り返し方法 */
alpha; /* mode: マスクモード */
/* Safari向けプレフィックス（同じ構文） */
-webkit-mask-border:
url('border.png') 30 / 20px / 5px round alpha;
}
/* よく使う省略形（必要な値のみ指定） */
.common-shorthand {
/* source, slice, width, repeat のみ指定（outsetとmodeはデフォルト値を使用） */
mask-border: url('border.png') 25 / 15px round;
-webkit-mask-border: url('border.png') 25 / 15px round;
}
/* 最小限の記述 */
.minimal-shorthand {
/* sourceとsliceのみ（他はデフォルト値） */
mask-border: url('border.png') 30;
-webkit-mask-border: url('border.png') 30;
}注意点:
widthとoutsetはスラッシュ（/）で区切る必要がある- 省略した値はデフォルト値が適用される
- ブラウザ対応のため、プレフィックス付きも記述することを推奨
ブラウザ対応とフォールバック
mask-borderは比較的新しいプロパティで、ブラウザのサポート状況に注意が必要です。
フォールバックとは: 新しい機能に対応していないブラウザでも、代替のスタイルを表示する仕組みです。
プログレッシブエンハンスメントとは: 基本的な機能をすべてのブラウザで提供し、対応ブラウザでは追加の機能を提供するアプローチです。
現在のブラウザ対応状況
| ブラウザ | 対応状況 | 備考 |
|---|---|---|
| Safari | -webkit- プレフィックス付きで対応 | 最も安定したサポート |
| Chrome | 部分的対応 | フラグが必要な場合あり |
| Firefox | 対応作業中 | 将来的にサポート予定 |
| Edge | Chromiumベースは部分的対応 | Chromeと同様 |
フォールバック付きの実装
@supportsルール（フィーチャークエリ）を使用して、ブラウザの対応状況を確認します。
.with-fallback {
/* === フォールバック: 通常のボーダー === */
/* mask-borderが使えないブラウザではこちらが適用される */
border: 3px solid #667eea;
border-radius: 8px;
/* === mask-borderをサポートするブラウザ向け === */
/* @supports: ブラウザが指定したプロパティに対応しているか確認 */
@supports (mask-border-source: url('')) or
(-webkit-mask-border-source: url('')) {
/* フォールバックのボーダーを削除 */
border: none;
/* mask-borderを適用 */
mask-border-source: url('decorative-border.png');
mask-border-slice: 30;
mask-border-width: 15px;
mask-border-repeat: round;
/* Safari向けプレフィックス */
-webkit-mask-border-source: url('decorative-border.png');
-webkit-mask-border-slice: 30;
-webkit-mask-border-width: 15px;
-webkit-mask-border-repeat: round;
}
}プログレッシブエンハンスメント
段階的にスタイルを適用する例です。
/* === Step 1: 基本スタイル（すべてのブラウザ） === */
.enhanced-border {
width: 300px;
padding: 20px;
background: white;
/* 最もシンプルなボーダー */
border: 2px dashed #999;
}
/* === Step 2: Safari対応（-webkit-プレフィックス） === */
@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;
}
}ポイント:
- 最初に基本的なスタイルを定義する
@supportsで対応を確認してから拡張スタイルを適用する- Safari対応と標準仕様対応を分けて記述する
mask-borderとborder-imageの違い
mask-borderとborder-imageは似ていますが、重要な違いがあります。どちらを使うべきか迷った場合の参考にしてください。
| 特徴 | mask-border | border-image |
|---|---|---|
| 目的 | マスク効果を適用 | ボーダーに画像を適用 |
| 透明度の扱い | 画像の透明度で要素を切り抜く | 画像をそのまま表示 |
| 要素への影響 | 要素全体の表示/非表示に影響 | ボーダー領域のみに影響 |
| ブラウザ対応 | 限定的 | 広くサポート |
| 用途 | 高度な装飾効果 | シンプルなボーダー装飾 |
視覚的な違い
/* === border-image の例 === */
/* 画像をそのままボーダーとして表示 */
/* 要素の内容は影響を受けない */
.border-image-example {
/* border-imageを使うにはborderの宣言が必要 */
border: 20px solid transparent;
/* ボーダーパターン画像を設定 */
border-image-source: url('border-pattern.png');
/* 画像のスライス位置 */
border-image-slice: 30;
}
/* === mask-border の例 === */
/* 画像の透明度に基づいて要素自体を切り抜く */
/* マスク画像の透明部分は要素も透明になる */
.mask-border-example {
mask-border-source: url('border-pattern.png');
mask-border-slice: 30;
mask-border-width: 20px;
/* Safari向け */
-webkit-mask-border-source: url('border-pattern.png');
-webkit-mask-border-slice: 30;
-webkit-mask-border-width: 20px;
}どちらを選ぶべきか:
- border-image: 単純にボーダーを画像で装飾したい場合
- mask-border: 要素の形状自体を変えたい場合、複雑な切り抜き効果が必要な場合
使用上の注意点
実際のプロジェクトでmask-borderを使用する際に注意すべきポイントを解説します。
パフォーマンスへの配慮
マスク画像のサイズと形式は、ページの読み込み速度に影響します。
/* === 推奨: 適切なサイズと形式の画像を使用 === */
.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を使う場合は適切なサイズにリサイズする
- 画像圧縮ツールで最適化する
アクセシビリティ
マスクボーダーは視覚的な装飾のため、重要な情報を伝えるために依存しないようにしましょう。
アクセシビリティとは: 障害のある方を含むすべてのユーザーがコンテンツを利用できるようにする配慮です。
/* === 装飾として使用（コンテンツに影響なし） === */
.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;
}アクセシビリティのポイント:
- マスクボーダーが機能しなくてもコンテンツが読めることを確認する
- テキストがマスク領域に重ならないよう十分なパディングを設定する
- 色のコントラストに依存しない（マスクが見えなくてもOKなデザインにする）
まとめ
mask-borderプロパティを使用することで、要素のボーダー領域に独自のマスク効果を適用し、従来のCSSでは難しかった装飾的なボーダーデザインを実現できます。
この記事で学んだこと
- mask-borderの基本概念: 6つの個別プロパティ（source、slice、width、outset、repeat、mode）とショートハンド記法
- 9スライス技法: 画像を9つの領域に分割してボーダーを作成する方法
- 実践的な使用例: カードデザイン、写真フレーム、SVGパターン、グラデーションボーダー
- ブラウザ対応: フォールバックとプログレッシブエンハンスメントの実装方法
- border-imageとの違い: それぞれの特徴と使い分け
ポイント
- 柔軟な装飾: 画像やSVGを使用して、複雑なボーダーパターンを作成可能
- ショートハンドで効率的: 6つの個別プロパティを一行で指定できる
- マスク効果:
border-imageと異なり、透明度に基づく切り抜き効果 - ブラウザ対応: 現時点では限定的なため、フォールバックの用意が重要
- プログレッシブエンハンスメント: サポートブラウザでは装飾を追加、非対応でも基本的なスタイルを維持
今後のブラウザサポートの拡大により、mask-borderはWebデザインにおける表現の幅をさらに広げる重要なプロパティになることが期待されます。
