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.

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:

    Ejemplo: contorno aplicado a
    varias líneas

    Ejemplo: borde aplicado a
    varias líneas

Valor inicialas each of the properties of the shorthand:
Applies toall elements
Heredableno
Mediaas each of the properties of the shorthand:
Valor calculadoas 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 typeas each of the properties of the shorthand:
Canonical orderorder of appearance in the formal grammar of the values

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-color'> || <'outline-style'> || <'outline-width'> ]

Example

HTML

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

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

Especificación Estado Comentarios
CSS Basic User Interface Module Level 3
La definición de 'outline' en esta especificación.
Recommendation Sin cambios
CSS Level 2 (Revision 1)
La definición de 'outline' en esta especificación.
Recommendation Definición inicial

Compatibilidad de navegadores

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome para AndroidEdge MobileFirefox para AndroidOpera para AndroidSafari en iOSSamsung Internet
outlineChrome Soporte completo 1Edge Soporte completo 12Firefox Soporte completo 1.5
Notas
Soporte completo 1.5
Notas
Notas Firefox includes absolutely positioned elements inside the outline (see bug 687311).
Sin soporte 1 — 3.6
Prefijado
Prefijado Requiere de un prefijo de vendedor : -moz-
IE Soporte completo 8Opera Soporte completo 7Safari Soporte completo 1.2WebView Android Soporte completo 1Chrome Android Soporte completo 18Edge Mobile Soporte completo SiFirefox Android Soporte completo 4Opera Android Soporte completo 10.1Safari iOS Soporte completo 3.1Samsung Internet Android ?

Leyenda

Soporte completo  
Soporte completo
Compatibilidad desconocida  
Compatibilidad desconocida
Ver notas de implementación.
Ver notas de implementación.
Requiere de un prefijo de proveedor o un de nombre diferente para su uso.
Requiere de un prefijo de proveedor o un de nombre diferente para su uso.

Etiquetas y colaboradores del documento

Colaboradores en esta página: mdnwebdocs-bot, danielblazquez, IsaacAaron, israel-munoz
Última actualización por: mdnwebdocs-bot,