borderで背景画像を表示する border-image

基本

test1 : 画像パス スライス 幅 (リピート:stretch)

サンプル

border-image-width

test2-1 : 27px

サンプル

test2-2 : 27px 27px

サンプル

test2-3 : 27px 27px 27px

サンプル

test2-4 : 27px 27px 27px 27px

サンプル

test2-5 : 27px 5px 10px 15px

サンプル

border-image-repeat

test3-1 : repeat

サンプル

test3-2 : round

サンプル

test3-3 : space

サンプル

test3-4 : round stretch

サンプル
サンプル

test3-5 : stretch round

サンプル
サンプル

border-image-slice

test4-1 : 27

サンプル

test4-2 : 27 10

サンプル

test4-3 : 27 10 20

サンプル

test4-4 : 27 10 20 40

サンプル

test4-5 : 27 10 20 40 / 27px 10px 20px 40px

サンプル
図説:border-image-slice

まとめ

test5 : 23 82 23 26

サンプル
サンプルサンプルサンプルサンプル