ではでは、前回に続いてborder-imageについてです。
今回は、具体的な記述法を見ていきます。

では、まず例を見てみましょう。

border-image: url(border.png) 30 30 30 30 / 15px 15px 15px 15px round;

素直に全部書くとこうなります。
指定内容をもう一度見てみましょう。
border-image: 画像のソース スライス位置 / ボーダー幅 リピート方法;

実際に記述する時は、スライス位置をまとめて、ボーダー幅を外に出すとわかりやすいかと思います。

border-image: url(border.png) 30 round;
border-width:15px;

最後にリピート方法の違いを見てみましょう。

stretch

画像が引き伸ばされて領域を埋めます。デフォルト値はこれになっています。

repeat

画像が繰り返されて領域を埋めます。計算が合っていないと端のほうで画像が途中で切れたような状態になります。

round

画像が繰り返されて領域を埋めますが、repeatとの違いは、画像が整数で並ばない場合にはあんじょうよく拡大縮小して整数で合うようにしてくれるところです。

space

画像が繰り返されて領域を埋めますが、画像が整数で並ばない場合には余ったスペースが周囲に分配されます。

使いやすいのはroundかstretchかなと思います。

これで一通り説明できたかなと思います。
あ、あとブラウザごとのプリフィックスも忘れずに！

border-image: url(border.png) 30 round;
-moz-border-image: url(border.png) 30 round;
-webkit-border-image: url(border.png) 30 round;
-o-border-image: url(border.png) 30 round;
border-width:15px;

ではでは、どんどん試してみてください！