Cor da Borda do CSS

Cor da Borda do CSS

border-color A propriedade é usada para definir as cores das quatro bordas.

A cor pode ser configurada da seguinte forma:

  • name - Especificar nome da cor, por exemplo "red"
  • HEX - Especificar valor hexadecimal, por exemplo "#ff0000"
  • RGB - Especificar valor RGB, por exemplo "rgb(255,0,0)"
  • HSL - Especificar valor HSL, por exemplo "hsl(0, 100%, 50%)"
  • transparent

Comentário:Se não for configurado border-colorse não for definida, ela herdará a cor do elemento.

Exemplo

Demonstração de diferentes cores de borda:

p.one {
  border-style: sólido;
  border-color: red;
}
p.two {
  border-style: sólido;
  border-color: green;
}
p.three {
  border-style: dotted;
  border-color: blue;
}

Resultado:

Borda contínua vermelha

Borda contínua verde

Borda pontilhada azul

Experimente pessoalmente

Cor específica da borda

border-color A propriedade pode definir de um a quatro valores (usados para a borda superior, borda direita, borda inferior e borda esquerda).

Exemplo

p.one {
  border-style: sólido;
  border-color: red green blue yellow; /* 上红、右绿、下蓝、左黄 */
}

Experimente pessoalmente

Valores HEX

A cor da borda também pode ser especificada usando valores hexadecimais (HEX):

Exemplo

p.one {
  border-style: sólido;
  border-color: #ff0000; /* Vermelho */
}

Experimente pessoalmente

Valores RGB

Ou use valores RGB:

Exemplo

p.one {
  border-style: sólido;
  border-color: rgb(255, 0, 0); /* Vermelho */
}

Experimente pessoalmente

Valores HSL

Também pode usar valores HSL:

Exemplo

p.one {
  border-style: sólido;
  border-color: hsl(0, 100%, 50%); /* Vermelho */
}

Experimente pessoalmente

Você pode experimentar em nossas Cores do CSS Aprenda mais sobre valores HEX, RGB e HSL no capítulo.