【CSS3】border-image：画像ボーダーを指定する

（例）【CSS3】border-imageの使用方法

See the Pen
border-image by linlin (@linlin098765)
on CodePen.

<p class="sample1">１</p>
<p class="sample2">２</p>
<p class="sample3">３</p>
<p class="sample4">４</p>
<div>
ボーダーに使用した画像<br>
<img src="https://www.llc-linlin.com/picture/SEO.jpg" alt="ボーダー用画像">
</div>

p{
  width:280px; height:50px;
  border-style:solid; border-width:10px; 
}
p.sample1 {
border-image: url("https://www.llc-linlin.com/picture/SEO.jpg") 15 round;
}
p.sample2 {
border-image: url("https://www.llc-linlin.com/picture/SEO.jpg") 15 round stretch;
}
p.sample3 {
border-image: url("https://www.llc-linlin.com/picture/SEO.jpg") 15;
}
p.sample4 {
border-image: url("https://www.llc-linlin.com/picture/SEO.jpg") 30;
}

【CSS3】border-image：画像ボーダーを指定する

　CSS3のborder-imageは画像ボーダーを指定するプロパティです。
　border-imageは、画像ボーダーに関する表示方法をまとめて指定することが可能であり、border-image-source,border-image-slice,border-image-width,border-image-outset,border-image-repeatの値を半角スペースでそれぞれ区切り指定します。

• border-image-source
  ボーダーで使用する画像を指定
• border-image-slice
  内側へスライスする距離を指定（９つのイメージパーツに分割される）
• border-image-width
  画像ボーダーの太さを指定（border-widthでも可）
• border-image-outset
  画像の開始位置を指定
• border-image-repeat
  stretch・round・repeat・spaceのキーワードで画像の繰り返し方法を指定