HTML & CSS

レシピ

ボーダー

画像を使ってボーダーをデザインする

CSSのborder-imageプロパティと画像を使い、自由なデザインのボーダーを引く方法を解説します。

この記事のポイント

  • 画像を使ってボーダーを自由にデザインする
  • border-image関連プロパティの指定方法が分かる

目次

CSSと画像を使って自由に枠線をつける

CSSでは画像と組み合わせることで、HTMLに好みの枠線(ボーダー)をつけることができます。

ボーダーを画像にしている例
ボーダーを画像にしている例

次の画像を素材にして、CSSのborder-image関連プロパティでボーダーとして表示しています。

ボーダーの素材となる画像
ボーダーの素材となる画像

コード例

<style>
section {
	margin: 20px auto;
	padding: 20px;
	width: 460px;
	border: 10px solid;
	border-image-source: url(./images/bg_border.png);
	border-image-slice: 33%;
	border-image-repeat: repeat;
	border-image-width: 13px;
}

section p {
	color: #333;
}
</style>
<section>
	<p>ボーダーに画像を使う</p>
</section>

border-imageプロパティでボーダーを表示する仕組みを解説します。

Note

border-imageプロパティは新しいブラウザでないと対応していないことがあるため注意が必要です。Edgeは使用できますが、IEでは11以降で対応しています。

border-imageプロパティの使い方

画像を使ってボーダーを表示するborder-imageプロパティは、次の5つの関連プロパティが用意されています。

プロパティ名設定する内容
border-image-sourceプロパティボーダーに使用する画像のパスを指定
border-image-sliceプロパティ画像をスライスする間隔を指定
border-image-widthプロパティ画像ボーダーの幅を指定
border-image-outsetプロパティ画像ボーダーの表示の仕方を指定
border-image-repeatプロパティ画像の表示方法を指定

これらのプロパティを、border-imageプロパティでまとめて指定することもできます。
例えば、上記のソースコードは次のように一括指定に置き換えられます。

コード例

<style>
section {
	margin: 20px auto;
	padding: 20px;
	width: 460px;
	border: 10px solid;
	border-image: url(./images/bg_border.png) 33% / 13px 13px repeat;
}

section p {
	color: #333;
}
</style>
<section>
	<p>ボーダーに画像を使う</p>
</section>

値の指定はsourceプロパティ、sliceプロパティ、widthプロパティ、outsetプロパティ、repeatプロパティの順に指定します。
また、数値を指定するプロパティ同士の間は「/ (半角スラッシュ)」で区切る必要があります。

また、border-imageプロパティを使用するにはボーダー自体が表示される指定となっている必要があります。
そのため、上記のようにborderプロパティを使って太さやスタイルを指定しておきます。

border-image-sliceプロパティは、画像をCSSスプライトのように表示範囲をスライスしてボーダーとして表示すします。
上記のコードでは上下左右の全てを「33%」とし、次の画像のように9つの画像へ区切るイメージで表示しています。

画像のスプライトイメージ
画像のスプライトイメージ

border-image-widthプロパティは画像の表示サイズを指定します。
次のように、様々な組み合わせで指定することができます。

border-image-widthプロパティの指定例

/* 上下左右 一括指定 */
border-image-width: 13px;

/* 上下 / 左右 */
border-image-width: 26px 13px;

/* 上 / 左右 / 下 */
border-image-width: 26px 13px 13px;

/* 上 / 左 / 下 / 右 */
border-image-width: 26px 13px 13px 5px;

こちらの記事は役に立ちましたか?

ありがとうございます。
もしよろしければ、あわせてフィードバックや要望などをご入力ください。

ありがとうございます。
コメントを送信しました。