No estándar
This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.

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.

 

Valor inicialnone
Applies toall elements
Heredableno
Mediavisual
Valor calculadocomo se especifica
Animation typediscrete
Canonical orderel orden único no-ambigüo definido por la gramática formal

 

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>+ | 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>

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

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

Característica Chrome Firefox (Gecko) Internet Explorer Opera Safari
Soporte básico Sin soporte 1.0 (1.7 o anterior) Sin soporte Sin soporte Sin soporte
Característica Android Chrome for Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Soporte básico Sin soporte Sin soporte ? Sin soporte Sin soporte Sin soporte

Ver además

Etiquetas y colaboradores del documento

Colaboradores en esta página: teoli, Sebastianz, pekechis
Última actualización por: teoli,