-moz-border-bottom-colors

Em aplicações Mozilla como o Firefox, a propriedade CSS -moz-border-bottom-colors define uma lista de cores para a borda inferior.

/* Valor unico <color>  */
-moz-border-bottom-colors: #00E676;

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

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

Quando um elemento tem a borda maior do que um único pixel do CSS, cada linha de pixel usa a próxima cor especificada em sua propriedade, de fora para dentro. Isso elimina a necessidade de caixas aninhadas. Se a borda for mais larga que o número de cores especificadas, a parte restante da borda é a cor especificada mais próxima.

Não se aplica

1. se border-style é dashed ou dotted.
2. a tabelas com border-collapse: collapse.

Sintaxe

Valores

Aceita uma lista de valores de cores separados por espaços em branco.

<color>

Especifica a cor de uma linha de pixels da borda inferior. transparent é válido. Veja os valores de <color> para possíveis unidades.

none

Padrão, nenhuma cor é desenhada ou o border-color é usado, se for especificado.

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

Exemplo

<div id="exemplo">Exemplo</div>

#exemplo {
  padding: 20px;
  background-color: pink;
  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;
}

Especificações

Essa propriedade não é parte de nenhuma especificação.

Compatibilidade de navegador

Veja também

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