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.
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
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 |
Valor calculado | as each of the properties of the shorthand:
|
Animation type | as each of the properties of the shorthand:
|
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
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
BCD tables only load in the browser