Color del contorno de CSS

Color del contorno de CSS

outline-color La propiedad se utiliza para configurar el color del contorno.

Se puede configurar el color de la siguiente manera:

  • name - especificar un nombre de color, por ejemplo "rojo"
  • HEX - especificar un valor hexadecimal, por ejemplo "#ff0000"
  • RGB - especificar un valor RGB, por ejemplo "rgb(255,0,0)"
  • HSL - especificar un valor HSL, por ejemplo "hsl(0, 100%, 50%)"
  • invert - realiza un cambio de color inverso (asegúrese de que el contorno sea visible, independientemente del color de fondo)

El siguiente ejemplo muestra diferentes estilos de contornos de diferentes colores. Tenga en cuenta que estos elementos tienen un borde fino negro dentro del contorno:

contorno en línea recta de color rojo.

contorno punteado de color azul.

contorno saliente de color gris.

Ejemplo

p.ex1 {
  border: 2px sólido negro;
  outline-style: solid;
  outline-color: rojo;
}
p.ex2 {
  border: 2px sólido negro;
  outline-style: punteado;
  outline-color: azul;
}
p.ex3 {
  border: 2px sólido negro;
  outline-style: outset;
  outline-color: gris;
}

Prueba personalmente

valor HEX

También puede especificar el color del contorno utilizando un valor hexadecimal (HEX):

Ejemplo

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

Prueba personalmente

valor RGB

o bien utilizando un valor RGB:

Ejemplo

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

Prueba personalmente

Valores HSL

También puedes usar valores HSL:

Ejemplo

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

Prueba personalmente

Puedes encontrar más información en nuestra Colores de CSS Aprende más sobre valores HEX, RGB y HSL en el capítulo.

cambio de color

El siguiente ejemplo utiliza outline-color: invertEjecutó el cambio de color inverso. Esto asegura que el contorno sea visible independientemente del color de fondo:

Borde con contorno de línea sólida en color invertido.

Ejemplo

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

Prueba personalmente