Cor do Contorno do CSS

Cor do Contorno do CSS

outline-color A propriedade é usada para definir a cor do contorno.

Você pode configurar a cor da seguinte forma:

  • nome - Especifica nome de cor, por exemplo "vermelho"
  • HEX - Especifica valores hexadecimais, por exemplo "#ff0000"
  • RGB - Especifica valores RGB, por exemplo "rgb(255,0,0)"
  • HSL - Especifica valores HSL, por exemplo "hsl(0, 100%, 50%)"
  • invert - Executa inversão de cores (garante que o contorno seja visível, independentemente da cor de fundo)

O exemplo a seguir mostra diferentes estilos de contornos de diferentes cores. Observe que esses elementos ainda têm uma borda fina preta dentro do contorno:

Contorno contínuo vermelho.

Contorno pontilhado azul.

Contorno em relevo cinza.

Exemplo

p.ex1 {
  border: 2px sólido preto;
  outline-style: solid;
  outline-color: vermelho;
}
p.ex2 {
  border: 2px sólido preto;
  outline-style: pontilhado;
  outline-color: azul;
}
p.ex3 {
  border: 2px sólido preto;
  outline-style: outset;
  outline-color: cinza;
}

Experimente você mesmo

Valor HEX

Você também pode usar valores hexadecimais (HEX) para especificar a cor da contorno:

Exemplo

p.ex1 {
  outline-style: solid;
  outline-color: #ff0000; /* vermelho */
}

Experimente você mesmo

Valor RGB

ou usando um valor RGB:

Exemplo

p.ex1 {
  outline-style: solid;
  outline-color: rgb(255, 0, 0); /* vermelho */
}

Experimente você mesmo

Valores HSL

Você também pode usar valores HSL:

Exemplo

p.ex1 {
  outline-style: solid;
  outline-color: hsl(0, 100%, 50%); /* Vermelho */
}

Experimente você mesmo

Você pode encontrar em nosso Cor do CSS Aprenda mais sobre valores HEX, RGB e HSL no capítulo.

inversão de cor

O exemplo a seguir usa outline-color: invertExecutou a inversão de cor. Isso garante que o contorno seja visível independentemente do fundo de cor:

Contorno de linha sólida de cor invertida.

Exemplo

p.ex1 {
  border: 1px solid yellow;
  outline-style: solid;
  outline-color: invert;
}

Experimente você mesmo