非標準
この機能は標準ではなく、標準化の予定もありません。公開されているウェブサイトには使用しないでください。ユーザーによっては使用できないことがあります。実装ごとに大きな差があることもあり、将来は振る舞いが変わるかもしれません。
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 |
|---|---|
| 適用対象 | すべての要素 |
| 継承 | なし |
| メディア | 視覚 |
| 計算値 | 指定値 |
| アニメーションの種類 | 個別 |
| 正規順序 | 形式文法で定義される一意のあいまいでない順序 |
以下の場合は適用されません。
border-styleがdashedまたはdottedである場合- 表で
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; }仕様書
このプロパティはどの仕様書でも定義されていません。
ブラウザーの対応
このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 https://github.com/mdn/browser-compat-data をチェックアウトしてプルリクエストを送信してください。Update compatibility data on GitHub
デスクトップ モバイル Chrome Edge Firefox Internet Explorer Opera Safari Android webview Android 版 Chrome Edge Mobile Android 版 Firefox Android 版 Opera iOS 版 Safari Samsung 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 未対応 なし 凡例
- 未対応
- 未対応
- 非標準。ブラウザー間の互換性が低い可能性があります。
- 非標準。ブラウザー間の互換性が低い可能性があります。
- 実装ノートを参照してください。
- 実装ノートを参照してください。
関連情報