CSS3 ボーダー画像

CSS3 の border-image プロパティを使用すると、通常のボーダースタイルの代わりに画像を指定して、要素の周囲に配置することが可能になります。

1. CSS3 border-image プロパティ

border-image プロパティを使うことで、要素に対してより複雑でデザイン性の高い境界線を設定できます。

このプロパティは、主に以下の 3 つの部分で構成されます。

1. 境界線として使用する画像のパス（URL）
2. 画像をどのようにスライス（分割）するか
3. 中間部分を繰り返すか、あるいは引き伸ばすか

1.1 基本的な実装例

以下は、border-image を使用して、画像から境界線を作成するコードの例です。

#borderimg {
  border: 10px solid transparent;
  padding: 15px;
  /* 画像、スライス値、繰り返しの設定を一括指定 */
  border-image: url(border.png) 30 round;
}

2. border-image-slice プロパティ

border-image-slice プロパティは、border-image-source で指定された画像をどのようにスライスするかを決定します。

画像は 9 つのセクション（4 つの角、4 つの辺、および中央部分）に分割されます。

• 4 つの角（Corners）は、要素の角に配置されます。
• 4 つの辺（Edges）は、要素のサイズに合わせて繰り返されるか、引き伸ばされます。
• 中央部分（Middle）は通常、破棄されますが、fill キーワードを使用することで背景として残すことも可能です。

3. border-image-repeat プロパティ

border-image-repeat プロパティは、画像の辺と中央部分をどのように処理するかを指定します。主に以下の 3 つの値が使われます。

• stretch: デフォルト値。画像を要素のサイズに合わせて引き伸ばします。
• repeat: 画像をタイル状に繰り返します。
• round: 画像を繰り返しますが、要素の幅や高さにぴったり収まるように画像をわずかに拡大・縮小して調整します。

3.1 各値の挙動の違い

異なるリピート設定を適用した例を比較してみましょう。

#borderimg1 {
  border: 30px solid transparent;
  padding: 15px;
  /* stretch: 画像を引き伸ばす */
  border-image: url(border.png) 30 stretch;
}

#borderimg2 {
  border: 30px solid transparent;
  padding: 15px;
  /* repeat: 画像を単純に繰り返す */
  border-image: url(border.png) 30 repeat;
}

#borderimg3 {
  border: 30px solid transparent;
  padding: 15px;
  /* round: きれいに収まるように繰り返す */
  border-image: url(border.png) 30 round;
}

4. 異なるスライス値の適用例

border-image-slice の値を変えることで、境界線の見た目は大きく変わります。

#example1 {
  border: 15px solid transparent;
  /* スライス値を 50 に設定 */
  border-image: url(border.png) 50 round;
}

#example2 {
  border: 15px solid transparent;
  /* スライス値を 20% に設定 */
  border-image: url(border.png) 20% round;
}

#example3 {
  border: 15px solid transparent;
  /* スライス値を 30% に設定 */
  border-image: url(border.png) 30% round;
}

5. CSS3 ボーダー画像プロパティ一覧

これらのプロパティを組み合わせることで、CSS のみで非常にクリエイティブな UI コンポーネントを実装することが可能になります。モダンブラウザの互換性も十分に確保されているため、積極的にプロジェクトへ導入すべき技術の一つです。