非標準
この機能は標準ではなく、標準化の予定もありません。公開されているウェブサイトには使用しないでください。ユーザーによっては使用できないことがあります。実装ごとに大きな差があることもあり、将来は振る舞いが変わるかもしれません。

Gecko 59 で廃止 (Firefox 59 / Thunderbird 59 / SeaMonkey 2.56)
この機能は廃止されました。まだいくつかのブラウザーで動作するかもしれませんが、いつ削除されてもおかしくないので、使わないようにしましょう。

Firefox などの Mozilla アプリケーションにおいて、 CSS の -moz-border-bottom-colors プロパティは下辺の境界に色のリストを設定します。

/* 単一の <color> 値 */
-moz-border-bottom-colors: #f0f0f0;

/* 複数の <color> 値 */
-moz-border-bottom-colors: #f0f0f0 #a0a0a0 #505050 #000000;

/* グローバル値 */
-moz-border-bottom-colors: inherit;
-moz-border-bottom-colors: initial;
-moz-border-bottom-colors: unset;

要素が 1 CSS ピクセルより太い幅の境界を持つ場合、各ピクセルの線はプロパティで指定された次の色を外側から内側に向かって使用します。これは入れ子状のボックスを除去する必要があります。境界がこのプロパティで指定された色の数よりも太いとき、境界の残りの部分は最も内側の色が指定されます。

初期値none
適用対象すべての要素
継承なし
メディア視覚
計算値指定値
アニメーションの種類個別
正規順序形式文法で定義される一意のあいまいでない順序

以下の場合は適用されません。

  1. border-styledashed または dotted である場合
  2. 表で border-collapse: collapse の場合

構文

ホワイトスペースで区切られた色の値のリストを受け付けます。

<color>
境界の下辺におけるピクセルの線の色を指定します。 transparent も有効です。利用可能な単位は <color> 値を参照してください。
none
既定値で、色が描かれないか、指定されていれば border-color が使用されます。

形式文法

<color>+ | none

where
<color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>

where
<rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]? ) | rgb( <number>{3} [ / <alpha-value> ]? ) | rgb( <percentage>#{3} , <alpha-value>? ) | rgb( <number>#{3} , <alpha-value>? )
<rgba()> = rgba( <percentage>{3} [ / <alpha-value> ]? ) | rgba( <number>{3} [ / <alpha-value> ]? ) | rgba( <percentage>#{3} , <alpha-value>? ) | rgba( <number>#{3} , <alpha-value>? )
<hsl()> = hsl( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsl( <hue>, <percentage>, <percentage>, <alpha-value>? )
<hsla()> = hsla( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsla( <hue>, <percentage>, <percentage>, <alpha-value>? )

where
<alpha-value> = <number> | <percentage>
<hue> = <number> | <angle>

<div id="example">Example</div>
#example {
  padding: 20px;
  background-color: gray;
  border: 10px solid black;
  -moz-border-top-colors: #e00 #c30 #c50 #c60 #c70 #c80 #c90 #ca0 #cb0 #cc0;
  -moz-border-right-colors: red #f60 #f80 #f90 #fa0 #fb0 #fc0 #fd0 #fe0 #ff0;
  -moz-border-bottom-colors: red #f60 #f80 #f90 #fa0 #fb0 #fc0 #fd0 #fe0 #ff0;
  -moz-border-left-colors: #e00 #c30 #c50 #c60 #c70 #c80 #c90 #ca0 #cb0 #cc0;
}

仕様書

このプロパティはどの仕様書でも定義されていません。

ブラウザーの対応

機能ChromeEdgeFirefoxInternet ExplorerOperaSafari
基本対応 なし なし1 — 591 2 なし なし なし
機能Android webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
基本対応 なし なし なし4 — 591 2 なし なし なし

1. In Firefox 59, the property was limited to usage in chrome code only (See bug 1417200).

2. In Firefox 60, the property was removed completely (See bug 1429723).

関連情報

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

このページの貢献者: mfuji09, teoli, ethertank, Marsf
最終更新者: mfuji09,