Mozilla's getting a new look. What do you think? https://mzl.la/brandsurvey

-moz-border-top-colors

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 la aplicaciones de Mozilla como Firefox la propiedad CSS -moz-border-top-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

Valor inicialnone
Applies toall elements
Heredableno
Mediavisual
Valor calculadocomo se especifica
Animatableno
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. En tablas con border-collapse: collapse.

 

Síntaxis

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

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

/* Valores gloables */
-moz-border-top-colors: inherit;
-moz-border-top-colors: initial;
-moz-border-top-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

Característica Chrome Firefox (Gecko) Internet Explorer Opera Safari
Soporte básico No support 1.0 (1.7 or earlier) No support No support No support
Característica Android Chrome for Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Soporte básico No support No support ? No support No support No support

Ver además

Etiquetas y colaboradores del documento

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