css3によるborder_image

対応ブラウザ:Firefox,Google Chrome,Safari
-moz-border-image: url("○○.png") 端っこから何ピクセル使うかの値 / borderの幅 stretchなどの値;　/*Firefox*/
-webkit-border-image: url("○○.png") 端っこから何ピクセル使うかの値 / borderの幅 stretchなどの値;　/*Google Chrome,Safari*/
※Firefoxのみ表示が異なるのもある
参考サイト:http://www.pxt.jp/ja/diary/article/227/index.html

-使用画像4色-

border4色の画像

-round-

-moz-border-image: url("../images/border_image01.png") 20 / 10px round;
-webkit-border-image: url("../images/border_image01.png") 20 / 10px round;

-stretch-

-moz-border-image: url("../images/border_image01.png") 20 / 10px stretch;
-webkit-border-image: url("../images/border_image01.png") 20 / 10px stretch;

-指定しないでみる-

-moz-border-image: url("../images/border_image01.png") 15 / 10px;
-webkit-border-image: url("../images/border_image01.png") 15 / 10px;

-ピクセル幅を多めにしてみる-

-moz-border-image: url("../images/border_image01.png") 30 / 10px;
-webkit-border-image: url("../images/border_image01.png") 30 / 10px;

-roundとstretch両方を指定-

-moz-border-image: url("../images/border_image01.png") 20 / 10px round stretch;
-webkit-border-image: url("../images/border_image01.png") 20 / 10px round stretch;

-使用画像9色-

border9色の画像

-round-

-moz-border-image: url("../images/border_image02.png") 15 / 10px round;
-webkit-border-image: url("../images/border_image02.png") 15 / 10px round;

-stretch-

-moz-border-image: url("../images/border_image02.png") 15 / 10px stretch;
-webkit-border-image: url("../images/border_image02.png") 15 / 10px stretch;

-指定しないでみる-

-moz-border-image: url("../images/border_image02.png") 10 / 10px;
-webkit-border-image: url("../images/border_image02.png") 10 / 10px;

-ピクセル幅を多めにしてみる-

-moz-border-image: url("../images/border_image02.png") 30 / 10px;
-webkit-border-image: url("../images/border_image02.png") 30 / 10px;

-roundとstretch両方を指定-

-moz-border-image: url("../images/border_image02.png") 15 / 10px round stretch;
-webkit-border-image: url("../images/border_image02.png") 15 / 10px round stretch;