プロパティ border-image-source

プロパティ border-image-source は境界線の画像を指定します。詳細については、プロパティ border-image を参照してください。

構文

セレクタ {
	border-image-source: url(画像へのパス);
}

例

プロパティ border-image-source は border-image-slice と一緒に指定する必要があります：

<div id="elem"></div>

#elem {
	border-image-source: url("image.png");
	border-image-slice: 26;
	border-style: solid;
	border-width: 26px;
	width: 200px;
	height: 200px;
	background: green;
	margin: 0 auto;
}

例

プロパティ border-image-slice が指定されていない場合、画像全体が角に適用されます（border-image-slice のデフォルト値は 100% のため）：

<div id="elem"></div>

#elem {
	border-image-source: url("image.png");
	border-style: solid;
	border-width: 26px;
	width: 200px;
	height: 200px;
	background: green;
	margin: 0 auto;
}

例

画像の代わりに線形グラデーションを指定することもできます：

<div id="elem"></div>

#elem {
	border-image-source: linear-gradient(to bottom, red, blue);
	border-image-slice: 30;
	border-width: 30px;
	border-style: solid;
	background: green;
	height: 200px;
	width: 200px;
	margin: 0 auto;
}

例

プロパティ border-image-slice が指定されていない場合、グラデーションは角に適用されます（border-image-slice のデフォルト値は 100% のため）：

<div id="elem"></div>

#elem {
	border-image-source: linear-gradient(to bottom, red, blue);
	border-width: 30px;
	border-style: solid;
	background: green;
	height: 200px;
	width: 200px;
	margin: 0 auto;
}

例

border-radius プロパティを指定しても、残念ながら境界線は丸くなりません（グラデーションの場合も同様です）。ただし、それなりに興味深い効果が得られます：

<div id="elem"></div>

#elem {
	border-radius: 100px;
	border-image-source: url("image.png");
	border-image-slice: 26;
	border-style: solid;
	border-width: 26px;
	width: 200px;
	height: 200px;
	background: green;
	margin: 0 auto;
}

プロパティ border-image-source

構文

例

例

例

例

例

関連項目