Mozilla's getting a new look. What do you think? https://mzl.la/brandsurvey

border-image-source

概要

CSS の border-image-source プロパティは、ボーダー領域にボーダーのスタイルの代わりに表示する <image> を指定します。このプロパティが none にセットされると、代わりに border-style が使われます。

注記: この CSS プロパティにはどういった <image> でも使えますが、ブラウザのサポートはまだ限定的です。一部のブラウザは url() 関数表記で定義された画像のみをサポートします。

初期値none
適用対象全要素。ただし border-collapsecollapse のときはテーブル要素内部にあるものを除く. It also applies to ::first-letter.
継承不可
メディアvisual
計算値none または画像の絶対的 URI
アニメーションの可否不可
正規順序形式文法で定義される一意のあいまいでない順序

構文

形式構文: none | <image>

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

where
<image()> = image( [ [ <image> | <string> ]? , <color>? ]! )
<image-set()> = image-set( <image-set-option># )
<element()> = element( <id-selector> )
<cross-fade()> = cross-fade( <cf-mixing-image> , <cf-final-image>? )
<gradient> = <linear-gradient()> | <repeating-linear-gradient()> | <radial-gradient()> | <repeating-radial-gradient()>

where
<color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>
<image-set-option> = [ <image> | <string> ] <resolution>
<cf-mixing-image> = <percentage>? && <image>
<cf-final-image> = <image> | <color>
<linear-gradient()> = linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> )
<repeating-linear-gradient()> = repeating-linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> )
<radial-gradient()> = radial-gradient( [ <ending-shape> || <size> ]? [ at <position> ]? , <color-stop-list> )
<repeating-radial-gradient()> = repeating-radial-gradient( [ <ending-shape> || <size> ]? [ at <position> ]? , <color-stop-list> )

where
<rgb()> = rgb( <rgb-component>#{3} )
<rgba()> = rgba( <rgb-component>#{3} , <alpha-value> )
<hsl()> = hsl( <hue>, <percentage>, <percentage> )
<hsla()> = hsla( <hue>, <percentage>, <percentage>, <alpha-value> )
<named-color> = <ident>
<deprecated-system-color> = ActiveBorder | ActiveCaption | AppWorkspace | Background | ButtonFace | ButtonHighlight | ButtonShadow | ButtonText | CaptionText | GrayText | Highlight | HighlightText | InactiveBorder | InactiveCaption | InactiveCaptionText | InfoBackground | InfoText | Menu | MenuText | Scrollbar | ThreeDDarkShadow | ThreeDFace | ThreeDHighlight | ThreeDLightShadow | ThreeDShadow | Window | WindowFrame | WindowText
<side-or-corner> = [ left | right ] || [ top | bottom ]
<color-stop-list> = <color-stop>{2,}
<ending-shape> = circle | ellipse
<size> = closest-side | farthest-side | closest-corner | farthest-corner | <length> | [ <length> | <percentage> ]{2}

where
<rgb-component> = <integer> | <percentage>
<alpha-value> = <number>
<hue> = <number>
<color-stop> = <color> [ <percentage> | <length> ]?

border-image-source: none                                  /* no border-image, use the specified border-style */
border-image-source: url(image.jpg)                        /* the image.jpg is used as image */
border-image-source: linear-gradient(to top, red, yellow)  /* a gradient is used as image */

border-image-source: inherit

さまさまな値を使った表示例は、 border-image をご覧ください。

仕様

仕様書 策定状況 コメント
CSS Backgrounds and Borders Module Level 3
border-image-source の定義
勧告候補 初回定義

ブラウザ実装状況

機能 Chrome Firefox (Gecko) Internet Explorer Opera Safari
基本サポート 15.0 15.0 (15.0) 未サポート 未サポート 未サポート
機能 Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
基本サポート ? 15.0 (15.0) 未サポート ? ?

ドキュメントのタグと貢献者

 このページの貢献者: wizAmit, teoli, Sebastianz, ethertank, sosleepy
 最終更新者: wizAmit,