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:
|
|---|---|
| Applies to | all elements |
| Heredable | no |
| Media | as each of the properties of the shorthand:
|
| Valor calculado | as each of the properties of the shorthand:
|
| Animation type | as each of the properties of the shorthand:
|
| 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
colordel elemento (color de primer plano). Veroutline-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 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
We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!
| 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 (error 687311).
