outline-color
=============

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.

* WebAIM: Comprobador de contraste de color
* MDN Entendiendo las WCAG, Directriz 1.4 explicaciones
* Comprender el Criterio de Conformidad 1.4.3 | W3C Entendiendo las WCAG 2.0
Definicion formal
-----------------

|  |  |
| --- | --- |
| Valor inicial | `auto` |
| Applies to | all elements |
| Heredable | no |
| Valor calculado | For 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 type | a 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 with JavaScript enabled. Enable JavaScript to view data.

Véase también
-------------

* `outline`
* `outline-color`
* `outline-style`
* `outline-width`
* El tipo de dato `<color>`
* Otras propiedades relacionadas con el color: `color`, `background-color`, `border-color`, `text-decoration-color`, `text-emphasis-color`, `text-shadow`, `caret-color`, y `column-rule-color` (en-US)
* Aplicar color a elementos HTML usando CSS (en-US)