Widely available YES。主要ブラウザで対応済み。装飾的なボーダーが必要な場面で使用可能。
レイアウト Widely available

Border images

通常の border は solid, dashed, dotted などの限られたスタイルと単色のみで表現される。border-image を使えば画像やグラデーションをボーダーとして適用でき、装飾的なフレームやグラデーションボーダーを実現できる。border-image-slice でスライスの分割方法を制御する。

装飾画像

概要

通常の border は solid, dashed, dotted などの限られたスタイルと単色のみで表現される。border-image を使えば画像やグラデーションをボーダーとして適用でき、装飾的なフレームやグラデーションボーダーを実現できる。border-image-slice でスライスの分割方法を制御する。

対応ブラウザ

デスクトップ

Chrome 56+
Edge 12+
Safari 9.1+
Firefox 50+

モバイル

Chrome Android 56+
Safari iOS 9.3+
Firefox Android 50+

基本構文

CSS 
/* グラデーションボーダー */
.gradient-border {
  border: 3px solid;
  border-image: linear-gradient(45deg, #f06, #9f6) 1;
}

/* 画像ボーダー */
.fancy-border {
  border: 30px solid transparent;
  border-image-source: url("border.png");
  border-image-slice: 30;
  border-image-repeat: round;
}

実務での使いどころ

  • グラデーションボーダー

    カードやボタンにグラデーションのボーダーを適用し、単色では表現できない装飾的な境界線を作成する。

  • 装飾的なフレーム

    画像を使った装飾的なフレーム（証明書、招待状など）を border-image で実現する。

注意点

  • border-image は border-radius と併用できない（角丸が無視される）。
  • border-image-slice の値設定が直感的でなく、画像に合わせた調整が必要になることが多い。

アクセシビリティ

  • 装飾的なボーダーは視覚的な演出であり、情報伝達に使用しないこと。重要な境界の視認性は色やコントラストで確保する。

参考リンク