-moz-border-bottom-colors

Nelle applicazioni di Mozilla come Firefox, la  proprietà di CSS -moz-border-bottom-colors imposta una lista di colori per il bordo inferiore.

/* Single <color> value */
-moz-border-bottom-colors: #f0f0f0;

/* Multiple <color> values */
-moz-border-bottom-colors: #f0f0f0 #a0a0a0 #505050 #000000;

/* Global values */
-moz-border-bottom-colors: inherit;
-moz-border-bottom-colors: initial;
-moz-border-bottom-colors: unset;

Quando un elemento ha un margine che è più grande di un singolo pixel CSS, tutta la linea dei pixel assume il colore accanto specificato in questa proprietà, dall'esterno verso l'interno.Questo elimina il bisogno di box annidati.Se il margine è più largo del numero dei colori specificati, la rimanente parte del margine è del colore specificato più interno. 

It does not apply

1. if border-style is dashed or dotted.
2. to tables with border-collapse: collapse.

Sintassi

Valori

Accetta una lista di colori separati dallo spazio.

<color>

Specifica il colore di una linea di pixel del margine inferiore. Il trasparente è valido.Vedi i valori <color> per le unità possibili.

none

Di default, nessun colore è applicato o è usato border-color, se specificato.

Sintassi

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

Esempio

<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;
}

Specificazioni

QUesta proprietà non è parte di nessun specificazione.

Compatibilità dei browser

See also

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