CSSのborder-imageプロパティ完全ガイド｜画像ボーダーの使い方とブラウザごとの注意点
CSSのborder-imageプロパティは、初めて触れるときには少し理解しづらいプロパティの一つです。この記事では、border-imageプロパティとは何か、その基本的な使い方、そしてブラウザごとの特有の挙動について詳しく解説します。
borderプロパティのおさらい
まず前提として、CSSの学習を進めていれば「border」プロパティはすでにご存じでしょう。おさらいとして、borderは要素の周囲に枠線を指定するためのショートハンド（一括指定）プロパティで、次のような構造を持っています。
border: 2px /* 幅 */ dashed /* スタイル */ green; /* 色 */
border-imageプロパティとは
borderプロパティと同様に、border-imageもショートハンドプロパティです。指定した画像ソースを使って、要素の周囲にボーダーを構築します。構造は以下の通りです。
border-image:
url("https://www.placekitten.com/501/700") /* ソース */
25% / /* スライス */
70px / /* 幅 */
2px /* アウトセット */
stretch; /* リピート */
border-imageは、以下の5つの個別プロパティ（ロングハンド）で構成されています。それぞれ詳しく見ていきましょう。
1. border-image-source
border-image-sourceは、border-imageの「ソース」部分に対応する個別プロパティです。相対パスまたは実際の画像URLを指定するurl()のほか、グラデーションを指定することもできます。
2. border-image-slice
border-image-sliceは、「スライス」部分に対応する個別プロパティです。画像を9つの領域に分割します。
デフォルトでは中央部分は取り除かれ、残りの8つの領域がプロパティを適用した要素を囲むように配置されます。border-image-sliceには最大4つの数値（%）を指定でき、それぞれの切り分け位置を決められます。また、中央部分も表示したい場合はfillキーワードを使用します。
3. border-image-width
border-widthプロパティと同様に、border-image-widthはボーダー画像の幅を指定します。パーセントやrem/em/pxが使え、最大4つの値を指定できるため、ボーダーの各辺に異なる幅を設定することも可能です。
4. border-image-outset
border-image-outsetは、画像ボーダーを要素のボーダーボックスからどれだけ外側に離して表示するかを指定します。ボーダーボックスとはボックスモデルの一部で、paddingとmarginの間にある領域のことです。値が大きいほどボーダーボックスから遠ざかります。こちらも最大4つの値を指定でき、必要に応じて各辺に個別の値を設定できます。
5. border-image-repeat
border-image-repeatは、画像の各エッジ（四隅を除く各辺）の表示方法を指定します。最大2つの値を取ります。値が1つの場合はすべてのエッジに適用され、2つ指定した場合は1つ目が上下、2つ目が左右に適用されます。指定できる値はstretch（引き伸ばし）、repeat（繰り返し）、round（繰り返して余白を調整）、space（間隔を空けて繰り返し）の4種類です。
ブラウザごとの注意点
個別のロングハンドプロパティを単独で使用してborder-imageを作成できるのは、FirefoxとSafariです。一方Chromeでは、ショートハンド形式でのみ使用でき、さらにborder-styleプロパティ（solid、dashedなど）と併用する必要があります。Chromeでborder-imageが正しく表示されない場合は、この点を確認してみてください。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Border Image</title>
<style>
* {
box-sizing: border-box;
}
.flex {
display: flex;
align-items: center;
justify-content: center;
text-align: center;
width: 500px;
height: 300px;
margin: 20px;
}
.border-image-box {
/* 以下の書き方はFirefoxとSafariでのみ動作 */
border-image-source: url(https://placekitten.com/900/1000);
border-image-slice: 25%;
border-image-width: 70px;
border-image-outset: 2px;
border-image-repeat: round;
padding: 80px;
/* この書き方はChromeでは動作しない */
}
.border-image-shorthand {
border-style: solid;
border-image:
url(https://placekitten.com/900/1000)
25% /
70px /
2px
round;
padding: 80px;
/* 上記の書き方はすべてのブラウザで動作します。FirefoxとSafariではborder-styleなしでborder-imageプロパティを使用できますが、Chromeでは画像を表示するために必ずborder-styleプロパティが必要です */
}
</style>
</head>
<body>
<div class="border-image-box flex">
これは個別のborder-imageプロパティを使ってスタイルしたボックスです
</div>
<div class="border-image-shorthand flex">
これはborder-imageショートハンドを使ってスタイルしたボックスです
</div>
</body>
</html>
まとめ
この記事では、border-imageプロパティを使って要素の周囲にCSS画像ボーダーを作成する方法を学びました。border-imageは、border-image-source、border-image-slice、border-image-width、border-image-outset、border-image-repeatという5つの個別プロパティから成るショートハンドプロパティです。すべてのブラウザで互換性を保つには、border-imageの値を指定する前にborder-style: solidを設定しておきましょう。
-
CSSボーダー（枠線）の使い方を徹底解説！初心者向けステップバイステップチュートリアル
CSSのborderプロパティは、HTML要素に枠線（ボーダー）を設定するために使用されます。このプロパティは、border-width（幅）、border-color（色）、border-style（スタイル）という3つのサブプロパティのショートハンド（省略記法）です。Webページ上の要素に枠線を追加することは、Webデザインにおいて重要な要素の一つです。枠線を活用することでページ内のコンテンツを視覚的に区切ることができ、訪問者が情報を理解しやすくなります。本記事では、CSSのborderプロパティとそのサブプロパティを使って、HTML要素に枠線をデザインする方法を詳しく解説します。この記事
-
CSSのborderショートハンド（一括指定）プロパティの使い方
borderプロパティは、要素の枠線（ボーダー）の見た目を定義するために使用されるプロパティです。border-width（線の太さ）、border-style（線の種類）、border-color（線の色）という3つの個別プロパティの値を、1つの宣言でまとめて指定できる「ショートハンド（一括指定）プロパティ」です。構文CSSのborderプロパティは、次のように記述します。セレクタ { border: /*値*/ }値は「太さ スタイル 色」の順に半角スペースで区切って指定するのが一般的です。例えば「2px solid orange」と指定すれ