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

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

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

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

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

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

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

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

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

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

構文

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

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

形式文法

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

仕様書

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

ブラウザーの対応

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOS 版 SafariSamsung Internet
基本対応
非標準
Chrome 未対応 なしEdge 未対応 なしFirefox 未対応 1 — 59
補足
未対応 1 — 59
補足
補足 In Firefox 59, the property was limited to usage in chrome code only (See bug 1417200).
補足 In Firefox 60, the property was removed completely (See bug 1429723).
IE 未対応 なしOpera 未対応 なしSafari 未対応 なしWebView Android 未対応 なしChrome Android 未対応 なしEdge Mobile 未対応 なしFirefox Android 未対応 4 — 59
補足
未対応 4 — 59
補足
補足 In Firefox 59, the property was limited to usage in chrome code only (See bug 1417200).
補足 In Firefox 60, the property was removed completely (See bug 1429723).
Opera Android 未対応 なしSafari iOS 未対応 なしSamsung Internet Android 未対応 なし

凡例

未対応  
未対応
非標準。ブラウザー間の互換性が低い可能性があります。
非標準。ブラウザー間の互換性が低い可能性があります。
実装ノートを参照してください。
実装ノートを参照してください。

関連情報

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

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