border-image-slice

border-image-sliceはボーダーに画像を指定する際にborder-image-sourceで指定した画像のスライス位置を指定できるプロパティです。

値はpxで指定しますが単位は省略します。また%でスライスする位置を比率で指定できます。

.target{
	width : 27px;
	height : 27px;
	border : 27px solid orange;
	border-image-source : url("/sample/images/border.png");
	border-image-slice : 27;
	border-image-width : 1;
	border-image-outset : 0;
	border-image-repeat : round;
}

sample

画像のスライスする位置を辺毎に指定する場合は以下のように指定します。

位置指定がひとつの場合は全辺で指定されたスライス位置を利用します。

border-image-slice : 27;

位置指定が２つの場合は最初に指定された値で上下のスライス位置を、2番目に指定された値で左右のスライス位置が指定できます。

border-image-slice : 27 10;

位置指定が3つの場合は最初に指定された値で上辺のスライス位置を、2番目に指定された値で左右のスライス位置を、3番目に指定された値で下辺のスライス位置が指定できます。

border-image-slice : 27 10 12;

位置指定が4つの場合は最初に指定された値で上辺のスライス位置を、2番目に指定された値で右辺のスライス位置を、3番目に指定された値で下辺のスライス位置を、4番目に指定された値で左辺のスライス位置が指定できます。

border-image-slice : 27 10 12 15;

fillキーワードを追加することで中央のスライス画像の内側の画像でborder-image内を塗りつぶすことも可能です

border-image-slice : 27 fill;

対応ブラウザ

IE	Chrome	Safari	Firefox	iOS	Android
◯ 11〜	◯ 15〜	△ 5.1〜 ◯ 7〜	◯ 15〜	△ 3.2〜 ◯ 6〜	△ 2.1〜 ◯ 4.4〜

◯は実装済み、△はベンダープレフィックス付の実装、☓は未実装です。

参考URL

6.2. Image Slicing: the ‘border-image-slice’ property - CSS3 - W3C

登録日 : 2014年07月13日最終更新日 : 2014年7月13日

CSSリファレンス