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`: `invert`, for browsers supporting it, `currentColor` for the other `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 `invert`, the computed value is `invert`. 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