1. 開発者向けのウェブ技術
  2. CSS
  3. リファレンス
  4. プロパティ
  5. border-image-source

このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docs コミュニティーについてもっと知り、仲間になるにはこちらから。

View in English Always switch to English

border-image-source

Baseline 広く利用可能

この機能は広く実装されており、多くのバージョンの端末やブラウザーで動作します。2015年7月以降、すべてのブラウザーで利用可能です。

border-image-source は CSS のプロパティで、要素の境界画像に使われる元の画像を設定します。

元の画像を最終的な境界画像に動的に適用する上で、複数の領域に分割するために border-image-slice プロパティが使用されます。

試してみましょう 

border-image-source: url("/shared-assets/images/examples/border-diamonds.png");

border-image-source: url("/shared-assets/images/examples/border-stars.png");

border-image-source: repeating-linear-gradient(
 45deg,
 transparent,
 #4d9f0c 20px
);

border-image-source: none;

<section id="default-example">
 <div id="example-element">これは周囲に境界があるボックスです。</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
/* キーワード値 */
border-image-source: none;
/* <image> 値 */
border-image-source: url("image.jpg");
border-image-source: linear-gradient(to top, red, yellow);
/* グローバル値 */
border-image-source: inherit;
border-image-source: initial;
border-image-source: revert;
border-image-source: revert-layer;
border-image-source: unset;

値

none

境界画像は使用されません。代わりに border-style で定義されたものが表示されます。

<image>

境界に使用する画像への参照です。

公式定義

初期値 none
適用対象すべての要素。ただし border-collapse が collapse のときはテーブル要素内部にあるものを除く。 ::first-letter にも適用されます。
継承 なし
計算値 none または画像の絶対化した URI
アニメーションの種類 離散値

形式文法 

border-image-source = 
 none | 
 <image> 

<image> = 
 <url> | 
 <image()> | 
 <image-set()> | 
 <cross-fade()> | 
 <element()> | 
 <gradient> 

<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>

例

基本的な例

css
.box {
 border-image-source: url("image.png");
}

仕様書

仕様書
CSS Backgrounds and Borders Module Level 3
# border-image-source

ブラウザーの互換性

関連情報

MDN の改良に協力

協力方法を知る

このページは MDN の貢献者によって に最終更新されました。

AltStyle によって変換されたページ (->オリジナル) /