outline-color

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since April 2017.

La propiedad CSS outline-color establece el color del contorno de un elemento.

Pruébalo

Sintaxis

css
/* Valores de <color> */
outline-color: #f92525;
outline-color: rgb(30, 222, 121);
outline-color: blue;

/* Valor de palabra clave */
outline-color: invert;

/* Valores globales */
outline-color: inherit;
outline-color: initial;
outline-color: revert;
outline-color: revert-layer;
outline-color: unset;

La propiedad outline-color se especifica como cualquiera de los valores enumerados a continuación.

Valores

<color>

El color del contorno, especificado como <color>.

invert

Para asegurarse de que el contorno sea visible, realiza una inversión de color del fondo. Tenga en cuenta que no es necesario que los navegadores admitan este valor; si no lo hacen, esta palabra clave se considera no válida.

Descripción

Un contorno es una línea que se dibuja alrededor de un elemento, fuera de border. A diferencia del borde del elemento, el contorno se dibuja fuera del marco del elemento y puede superponerse a otro contenido. El borde, por otro lado, en realidad alterará el diseño de la página para asegurarse de que encaje sin superponerse con nada más (a menos que lo establezca explícitamente para que se superponga).

Suele ser más conveniente usar la propiedad abreviada outline al definir la apariencia de un contorno.

Problemas de accesibilidad

Los estilos de enfoque personalizados normalmente implican realizar ajustes en la propiedad outline. Si se ajusta el color del contorno, es importante asegurarse de que la relación de contraste entre este y el fondo sobre el que se coloca el contorno sea lo suficientemente alta como para que las personas con problemas de visión puedan percibirlo.

La relación de contraste de color se determina comparando la luminosidad del texto y los valores de color de fondo. Para cumplir con las Directrices de Accesibilidad al Contenido Web (WCAG) actuales, se requiere una proporción de 4.5:1 para el contenido de texto y de 3:1 para textos más grandes, como los encabezados. El texto grande se define como 18.66 px y en negrita o más grande, o 24 px o más.

Definicion formal

Valor inicialauto
Applies toall elements
Heredableno
Valor calculadoFor the keyword auto, the computed value is currentcolor. For the color value, if the value is translucent, the computed value will be the rgba() corresponding one. If it isn't, it will be the rgb() corresponding one. The transparent keyword maps to rgba(0,0,0,0).
Animation typea color

Sintaxis formal

outline-color = 
  auto                      |
  [ <color> | <image-1D> ]  

<image-1D> = 
  <stripes()>  

<stripes()> = 
  stripes( <color-stripe># )  

<color-stripe> = 
  <color>                            &&
  [ <length-percentage> | <flex> ]?  

<length-percentage> = 
  <length>      |
  <percentage>

Ejemplo

Establecer un contorno azul sólido

HTML

html
<p>Como puedes ver, mi contorno es azul.</p>

CSS

css
p {
  outline: 2px solid; /* Establecer el ancho y el estilo del contorno */
  outline-color: #0000ff; /* Hacer el contorno azul */
  margin: 5px;
}

Resultado

Especificaciones

Specification
CSS Basic User Interface Module Level 4
# outline-color

Compatibilidad con navegadores

BCD tables only load in the browser

Véase también