outline

Resumen

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.

Los contornos difieren de los bordes de la siguiente manera:

Los contornos no ocupan espacio, son dibujados por encima del contenido.
Los contornos pueden no ser rectangulares. Son rectangulares en Gecko/Firefox. Pero por ejemplo, Opera dibuja una figura no rectangular alrededor del objeto así:
TEXTTEXTTEXT

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
Media	visual, interactive
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 `rgb(0,0,0)`. `outline-width`: an absolute length; if the keyword `none` is specified, the computed value is `0` `outline-style`: como se especifica
Animatable	as each of the properties of the shorthand: `outline-color`: yes, as a color `outline-width`: yes, as a length `outline-style`: no
Canonical order	order of appearance in the formal grammar of the values

Sintaxis

/* width | style | color */
outline: 1px solid white;

/* Valores globales */
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'> ]

Ejemplos

outline: solid; | outline: dashed red; | outline: dotted 1px; | outline: ridge thick violet; | outline: custom 5px;

/* dos declaraciones idénticas */

:link:hover { outline: 1px solid #000; }
:link:hover { outline: solid black 1px; }

Especificaciones

Especificación	Estado	Comentarios
CSS Basic User Interface Module Level 3 The definition of 'outline' in that specification.	Candidate Recommendation	Sin cambios
CSS Level 2 (Revision 1) The definition of 'outline' in that specification.	Recommendation	Definición inicial

Característica	Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari (WebKit)
Soporte básico	1.0	1.5 (1.8)^[1]	8.0	7.0	1.2 (125)

Característica	Android	Firefox Mobile (Gecko)	IE Phone	Opera Mobile	Safari Mobile
Soporte básico	1.0	1.0 (1.8) [1]	8.0	6.0	3.1

[1] En navegadores previos a Gecko 1.8 (Firefox 1.5) se podía lograr un efecto similar usando la Extensión CSS de Mozilla -moz-outline.

Firefox incluye los elementos con posición absoluta dentro del contorno (bug 687311).