-moz-border-bottom-colors

En la aplicaciones de Mozilla como Firefox la propiedad CSS -moz-border-bottom-colors establece una lista de colores para el borde inferior.

Cuando un elemento tiene un borde que es mayor de un único pixel CSS, cada línea de pixels usa el siguiente color especificado con esta propiedad, desde fuera hacia adentro. Esto elimina la necesidad de cajas anidadas. Si el borde es mayor que el número colores especificados, la parte restante del borde mantendrá el último color interno especificado

No se aplica

1. Si border-style es dashed o dotted.
2. En tablas con border-collapse: collapse.

Síntaxis

/* Valor de <color> único */
-moz-border-bottom-colors: #f0f0f0;

/* Valores de <color> múltiples */
-moz-border-bottom-colors: #f0f0f0 #a0a0a0 #505050 #000000;

/* Valores globales */
-moz-border-bottom-colors: inherit;
-moz-border-bottom-colors: initial;
-moz-border-bottom-colors: unset;

Valores

Acepta una lista de colores separados por espacios en blanco.

<color>

Especifica el color de una línea de pixels para el borde inferiror. transparent (transparente) es un color válido. Ver  valores de <color> para ver las posibles unidades.

none

Valor por defecto, si se establece no se muestra ningún color  ni se usa border-color

Síntaxis formal

[<color>]* <color> | none
where 
<color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>
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
where 
<rgb-component> = <integer> | <percentage>
<alpha-value> = <number>
<hue> = <number>

Ejemplo

<div id="example">Ejemplo</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;
}

Especificaciones

Esta propiedad no forma parte de ninguna especificación.

Compatibilidad con los distintos navegadores

Ver además

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