border-image-outset

このエントリーをはてなブックマークに追加

border-image-outsetはボーダー画像が描画する領域外のサイズを指定するためのプロパティです。

ボーダー画像は通常はborder-box領域の内側にborder-image-widthに指定されたサイズだけ描画されますが、border-image-outsetを指定することでborder-box領域の外側つまりmarginなどで指定されている領域に描画することができます。

.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

数値nが指定された場合は、border-image-widthで指定されたボーダー幅のn倍のサイズを領域外に描画します。

領域外の幅を辺毎に指定する場合は以下のように指定します。

幅指定がひとつの場合は全辺で指定された領域外の幅を利用します。

border-image-outset : 1;

幅指定が2つの場合は最初に指定された値で上下の領域外の幅を、2番目に指定された値で左右の領域外の幅が指定できます。

border-image-outset : 2 1;

幅指定が3つの場合は最初に指定された値で上辺の領域外の幅を、2番目に指定された値で左右の領域外の幅を、3番目に指定された値で下辺の領域外の幅が指定できます。

border-image-outset : 2 1.5 1;

幅指定が4つの場合は最初に指定された値で上辺の領域外の幅を、2番目に指定された値で右辺の領域外の幅を、3番目に指定された値で下辺の領域外の幅を、4番目に指定された値で左辺の領域外の幅できます。

border-image-outset : 1 2 1.5 1

対応ブラウザ

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

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

参考URL

6.4. Edge Overhang: the ‘border-image-outset’ property - CSS3 - W3C

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

同じカテゴリー(Border)のエントリー

検索

スポンサードリンク

バージョン

リファレンス