-moz-border-top-colors

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

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

1. border-style が dashed または 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;
}

仕様書

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

ブラウザーの対応

関連情報

• border-color
• -moz-border-right-colors
• -moz-border-bottom-colors
• -moz-border-left-colors