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 February 2017.
試してみましょう
メモ:
境界画像の読み込みに失敗したときのために、 border-style
を指定してください。仕様では厳密には要求されていませんが、border-style
が none
または border-width
が 0
の場合、境界画像を描画しないブラウザーもあります。
構成要素のプロパティ
このプロパティは以下の 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> |
<gradient>
<length-percentage> =
<length> |
<percentage>
<url> =
<url()> |
<src()>
<url()> =
url( <string> <url-modifier>* ) |
<url-token>
<src()> =
src( <string> <url-modifier>* )
例
ビットマップ
この例では、要素の境界にダイヤモンド模様を適用します。 source の画像は、縦と横にダイヤモンドが 3 つずつ並んだ 81 × 81 ピクセルの ".png" ファイルです。
HTML
<div id="bitmap">この要素はビットマップベースの境界画像に囲まれています。</div>
CSS
個々のダイヤモンドの大きさに一致するように、3で割れる81の値を使用するか、角と辺の領域を分割するための 27
を使用します。境界画像が要素の背景の辺の中央になるように、 outset の値を幅の半分にします。最後に、 round
に repeat の値を設定して、境界線の断片が等分に合うように、つまり、クリッピングをしたり隙間ができたりしないようにします。
#bitmap {
width: 200px;
background-color: #ffa;
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 id="gradient">この要素はグラデーションの境界に囲まれています。</div>
CSS
#gradient {
width: 200px;
border: 30px solid;
border-image: repeating-linear-gradient(45deg, #f33, #3bf, #f33 30px) 60;
padding: 20px;
}
結果
仕様書
Specification |
---|
CSS Backgrounds and Borders Module Level 3 # the-border-image |
ブラウザーの互換性
BCD tables only load in the browser