Propiedad CSS outline-color

La propiedad outline-color define el color de un contorno.

Un contorno es una línea que se dibuja alrededor de un elemento. Pero es diferente de la border propiedad. Las propiedades width y height de un elemento no incluyen el ancho del contorno porque el contorno no se considera parte de las dimensiones del elemento.

INFO

La propiedad outline-color no funciona si se usa sola. Debe usarse junto con las propiedades outline o outline-style.

Se pueden establecer valores hexadecimales, RGB, RGBA, HSL, HSLA o nombres de colores como valor para la propiedad outline-color. Consulta los valores de color en la sección HTML colors.

Valor inicial	invert
Se aplica a	Todos los elementos.
Heredado	No.
Animable	Sí. El color es animable.
Versión	CSS2
Sintaxis DOM	object.style.outlineColor = "#8ebf42";

Sintaxis

Sintaxis de CSS outline-color

css

outline-color: invert | color | initial | inherit;

Ejemplo de la propiedad outline-color:

Ejemplo de código CSS outline-color

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p {
        border: 3px solid #ccc;
        outline-style: double;
        outline-color: invert;
      }
    </style>
  </head>
  <body>
    <h2>Outline-color property example</h2>
    <p>Invert default value is applied.</p>
  </body>
</html>

Try it Yourself »

Resultado

Todos los valores de CSS outline-color

Ejemplo de la propiedad outline-color con colores hexadecimales, RGB, RGBA, HSL, HSLA:

Ejemplo de todos los valores de CSS outline-color

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .p1 {
        outline-style: solid;
        outline-color: #1c87c9;
      }
      .p2 {
        outline-style: solid;
        outline-color: hsl(65, 100%, 50%);
      }
      .p3 {
        outline-style: solid;
        outline-color: hsla(84, 49%, 50%, 1);
      }
      .p4 {
        outline-style: solid;
        outline-color: rgb( 224, 0, 0);
      }
      .p5 {
        outline-style: solid;
        outline-color: rgba(204, 204, 204, 1);
      }
    </style>
  </head>
  <body>
    <h2>Outline-color property example</h2>
    <p class="p1">This is a paragraph with hexadecimal blue outline.</p>
    <p class="p2">This is a paragraph with hsl yellow outline.</p>
    <p class="p3">This is a paragraph with hsla green outline.</p>
    <p class="p4">This is a paragraph with rgb red outline.</p>
    <p class="p5">This is a paragraph with rgba grey outline.</p>
  </body>
</html>

Try it Yourself »

Valores

Valor	Descripción	Probar
invert	Invierte cualquier color que se aplique al fondo. Este valor garantiza la visibilidad del contorno independientemente del color de fondo. Este es el valor predeterminado de esta propiedad.	Probar »
color	Define el color del contorno. Se pueden usar nombres de colores, códigos de color hexadecimales, rgb(), rgba(), hsl(), hsla().	Probar »
initial	Establece la propiedad en su valor predeterminado.	Probar »
inherit	Hereda la propiedad de su elemento padre.

Práctica

¿Qué es cierto sobre la propiedad Outline Color en CSS?

La propiedad outline-color en CSS se utiliza para establecer el color de un contorno.El color del contorno se puede establecer en todos los tipos de CSS.Solo es posible establecer el color del contorno en CSS3.Puedes usar una variedad de valores de color como RGB, HEX, HSL e incluso nombres de colores.El valor predeterminado de la propiedad outline-color en CSS es 'invert'.El color del contorno es siempre sólido y no puede usar degradado de color.

Propiedad CSS outline-color ​

Sintaxis ​

Ejemplo de la propiedad outline-color: ​

Resultado ​

Ejemplo de la propiedad outline-color con colores hexadecimales, RGB, RGBA, HSL, HSLA: ​

Valores ​