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íneasEjemplo: borde aplicado a
varias líneas
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
/* 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). Veroutline-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
The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Update compatibility data on GitHub
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
outline | Chrome Soporte completo 1 | Edge Soporte completo 12 | Firefox
Soporte completo
1.5
| IE Soporte completo 8 | Opera Soporte completo 7 | Safari Soporte completo 1.2 | WebView Android Soporte completo 1 | Chrome Android Soporte completo 18 | Firefox Android Soporte completo 4 | Opera Android Soporte completo 10.1 | Safari iOS Soporte completo 3.1 | Samsung 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.