-moz-border-left-colors

En aplicaciones de Mozilla, como Firefox, la propiedad CSS -moz-border-left-colors aplica una lista de colores al borde derecho.

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. A tablas con border-collapse: collapse.

Síntaxis

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

/* Valor de <color> único */
-moz-border-left-colors: #f0f0f0 #a0a0a0 #505050 #000000;

/* Valores globales */
-moz-border-left-colors: inherit;
-moz-border-left-colors: initial;
-moz-border-left-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-bottom-colors
• -moz-border-top-colors