このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docsコミュニティーについてもっと知り、仲間になるにはこちらから。
border-image
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2015年7月.
border-image はCSS のプロパティで、指定された要素の周りに画像を描きます。これは要素の通常の境界を置き換えます。
メモ:境界画像の読み込みに失敗したときのために、border-style を指定してください。仕様では厳密には要求されていませんが、border-style がnone またはborder-width が0 の場合、境界画像を描画しないブラウザーもあります。
試してみましょう
border-image: url("/shared-assets/images/examples/border-diamonds.png") 30;border-image: url("/shared-assets/images/examples/border-diamonds.png") 30 / 19px round;border-image: url("/shared-assets/images/examples/border-diamonds.png") 30 fill / 30px / 30px space;border-image: linear-gradient(#f6b73c, #4d9f0c) 30;border-image: repeating-linear-gradient(30deg, #4d9f0c, #9198e5, #4d9f0c 20px) 60;<section> <div>これは周囲に境界があるボックスです。</div></section>#example-element { width: 80%; height: 80%; display: flex; align-items: center; justify-content: center; padding: 50px; background: #fff3d4; color: black; border: 30px solid; border-image: url("/shared-assets/images/examples/border-diamonds.png") 30 round; font-size: 1.2em;}構成要素のプロパティ
このプロパティは以下の CSS プロパティの一括指定です。
構文
/* source | slice */border-image: linear-gradient(red, blue) 27;/* source | slice | repeat */border-image: url("/images/border.png") 27 space;/* source | slice | width */border-image: linear-gradient(red, blue) 27 / 35px;/* source | slice | width | outset | repeat */border-image: url("/images/border.png") 27 23 / 50px 30px / 1rem round space;/* グローバル値 */border-image: inherit;border-image: initial;border-image: revert;border-image: revert-layer;border-image: unset;border-image プロパティは以下に挙げた 1 つから 5 つの値で指定します。
メモ:border-image-source の計算値 がnone であったり、画像が表示できなかったりした場合は、border-style が代わりに表示されます。
値
<'border-image-source'>元となる画像です。
border-image-sourceを参照してください。<'border-image-slice'>source の画像を領域に分割する座標です。4 つまでの値が指定できます。
border-image-sliceを参照してください。<'border-image-width'>境界画像の幅です。4 つまでの値が指定できます。
border-image-widthを参照してください。<'border-image-outset'>要素の縁から境界画像までの間隔です。4 つまでの値が指定できます。
border-image-outsetを参照してください。<'border-image-repeat'>source の画像の辺の領域を境界画像の寸法にどのように合わせるかを定義します。2 つまでの値が指定できます。
border-image-repeatを参照してください。
アクセシビリティ
支援技術は境界画像を解釈することができません。画像にページ全体の目的を理解するために重要な情報が含まれている場合は、文書内に意味的に記述したほうがいいでしょう。
公式定義
| 初期値 | 一括指定の次の各プロパティとして |
|---|---|
| 適用対象 | すべての要素。ただしborder-collapse がcollapse のときはテーブル要素内部にあるものを除く。::first-letter にも適用されます。 |
| 継承 | なし |
| パーセント値 | 一括指定の次の各プロパティとして
|
| 計算値 | 一括指定の次の各プロパティとして
|
| アニメーションの種類 | 一括指定の次の各プロパティとして
|
形式文法
border-image =
<'border-image-source'>||
<'border-image-slice'>[ /<'border-image-width'>| /<'border-image-width'>? /<'border-image-outset'>]?||
<'border-image-repeat'>
<border-image-source> =
none|
<image>
<border-image-slice> =
[<number [0,∞]>|<percentage [0,∞]>]{1,4}&&
fill?
<border-image-width> =
[<length-percentage [0,∞]>|<number [0,∞]>|auto]{1,4}
<border-image-outset> =
[<length [0,∞]>|<number [0,∞]>]{1,4}
<border-image-repeat> =
[stretch|repeat|round|space]{1,2}
<image> =
<url>|
<image()>|
<image-set()>|
<cross-fade()>|
<element()>|
<gradient>
<length-percentage> =
<length>|
<percentage>
<image()> =
image(<image-tags>?[<image-src>? ,<color>?]!)
<image-set()> =
image-set(<image-set-option>#)
<cross-fade()> =
cross-fade(<cf-image>#)
<element()> =
element(<id-selector>)
<image-tags> =
ltr|
rtl
<image-src> =
<url>|
<string>
<image-set-option> =
[<image>|<string>][<resolution>||type(<string>)]?
<cf-image> =
[<image>|<color>]&&
<percentage [0,100]>?
<id-selector> =
<hash-token>
例
ビットマップ
この例では、要素の境界にダイヤモンド模様を適用します。 source の画像は、縦と横にダイヤモンドが 3 つずつ並んだ 81 × 81 ピクセルの ".png" ファイルです。
HTML
<div> この要素はビットマップベースの境界画像に囲まれています。</div>CSS
個々のダイヤモンドの大きさに一致するように、 3 で割れる 81 の値を使用するか、角と辺の領域を分割するための27 を使用します。境界画像が要素の背景の辺の中央になるように、 outset の値を幅の半分にします。最後に、round に repeat の値を設定して、境界線の断片が等分に合うように、つまり、クリッピングをしたり隙間ができたりしないようにします。
#bitmap { width: 200px; background-color: #ffffaa; border: 36px solid orange; margin: 30px; padding: 10px; border-image: url("border.png") 27 / 36px 28px 18px 8px / 18px 14px 9px 4px round;}結果
グラデーション
HTML
<div> この要素はグラデーションの境界に囲まれています。</div>CSS
#gradient { width: 200px; border: 30px solid; border-image: repeating-linear-gradient(45deg, #ff3333, #33bbff, #ff3333 30px) 60; padding: 20px;}結果
角丸の境界線
border-radius は境界画像に効果がありません。これは、border-image-outset は画像を境界ボックスの外に置くことができるので、境界画像が境界領域でクリップされることに意味がないからです。境界画像を使用して角を丸めるには、画像自体の角を丸めて作成するか、グラデーションの場合は背景として描画する必要があります。次の例では、境界線を拡張する画像とパディング枠に使用する画像の 2 つのbackground-imageを使用する手法を示します。
HTML
<div> この要素は、角が丸められた境界線で囲まれています！</div>CSS
#rounded { width: 200px; /* 背景画像が見えるように透明を使用する */ border: 10px solid transparent; padding: 20px; border-radius: 20px; background-image: linear-gradient(white, white), linear-gradient(to right, cyan, lime); background-origin: border-box; background-clip: padding-box, border-box;}結果
メモ:この用途に向けて新しいbackground-clip: border-area
仕様書
| Specification |
|---|
| CSS Backgrounds and Borders Module Level 3 # border-image |