枠が装飾されたボックスをコーディングする際、
背景画像を2分割や3分割にしなきゃいけなかったり、
デザインによっては可変に対応できなかったりと面倒だったりします。

CSS3でそこら辺の手間が解消できそうだったので
試しにグラデーション枠のボックスを作ってみました。

ボーダーに使用する画像ファイルを用意します

border-image-source：url();

スライスする位置を指定します。

四つの辺、四つの角、中央の9つのパーツに分けます

border-image-slice:10px;

四つの辺の高さを指定します。

border-image-width:10px;

	padding:20px;
	border:10px solid ;
	-moz-border-image: url(画像のパス) 10;
	-webkit-border-image: url(画像のパス) 10;

無駄なタグも使わず、可変にも対応できて便利！