outline
=======

La propiedad CSS **`outline`** es una forma reducida para establecer una o más de las propiedades individuales de contorno `outline-style`, `outline-width` y `outline-color` en una sola declaración. En la mayoría de los casos el uso de este atajo es preferible y más conveniente.

Pruébalo
--------

Al igual que con todas las propiedades abreviadas, cualquier subvalor omitido se establecerá en su valor inicial.

### Border vs outline

Los bordes y los contornos son muy similares. Sin embargo, los contornos difieren de los bordes de la siguiente manera:

* Los contornos no ocupan espacio, son dibujados por encima del elemento. Por lo tanto, su aparición u ocultamiento no causa un redibujado de las cajas. No suma en el tamaño de la caja y no hay movimiento o desplazamiento de los elementos como con `border`.
* Los contornos pueden no ser rectangulares. Si el elemento se distribuye en varias líneas, el contorno no forma un rectágulo para encerrar a todo el elemento. A **diferencia de los bordes**, el contorno no está abierto en algunos lados:
```

<p>
  <span style="outline: 2px solid #666666;"
 >Ejemplo: contorno aplicado a<br />
    varias líneas</span
 >
</p>

<p>
  <span style="border: 2px solid #666666;"
 >Ejemplo: borde aplicado a<br />
    varias líneas</span
 >
</p>
```


|  |  |
| --- | --- |
| Valor inicial | as each of the properties of the shorthand:* `outline-color`: `auto`
* `outline-style`: `none`
* `outline-width`: `medium`
 |
| Applies to | all elements |
| Heredable | no |
| Valor calculado | as each of the properties of the shorthand:* `outline-color`: 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)`.
* `outline-width`: an absolute length; if the keyword `none` is specified, the computed value is `0`
* `outline-style`: como se especifica
 |
| Animation type | as each of the properties of the shorthand:* `outline-color`: a color
* `outline-width`: a length
* `outline-style`: by computed value type
 |

Sintaxis
--------
```

/* style */
outline: solid;

/* color | style */
outline: #f66 dashed;

/* style | width */
outline: inset thick;

/* color | style | width */
outline: green solid 3px;

/* Global values */
outline: inherit;
outline: initial;
outline: unset;
```

### Valores

Uno, dos o tres valores, en orden arbitrario:

`<outline-width>`

Ver `outline-width`.

`<outline-style>`

Ver `outline-style`.

`<outline-color>`

Desde Gecko 1.9 (Firefox 3), es usado el valor de la propiedad `color` del elemento (color de primer plano). Ver `outline-color`.

### Sintaxis formal
```

outline =   
  <'outline-color'>  ||  
  <'outline-style'>  ||  
  <'outline-width'>    
  
```

Example
-------

### HTML


```html
<a href="#">Este link tiene un estilo especial para el foco</a>
```

### CSS


```css
a {
  border: 1px solid;
  border-radius: 3px;
  display: inline-block;
  margin: 10px;
  padding: 5px;
}

a:focus {
  outline: 4px dotted #e73;
  outline-offset: 4px;
  background: #ffa;
}
```

### Result

Especificaciones
----------------

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

Compatibilidad con navegadores
------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.