outline

Sumário

A propriedade CSS outline é uma propriedade abreviada para configurar uma ou mais das propriedades de contorno outline-style, outline-width e outline-color em uma única declaração. Na maioria dos casos o uso abreviado é preferível e mais conveniente.

Contornos se diferenciam de bordas das seguintes maneiras:

Contornos não ocupam espaços, eles são desenhados acima do conteúdo.
Contornos podem não ser retangulares. Eles são retangulares no Gecko/Firefox. Mas por exemplo, Opera desenha uma forma não retangular em torno de uma construção como este:
TEXTTEXTTEXT

Initial value	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`
Aplica-se a	all elements
Inherited	não
Midia	visual, interactive
Computed value	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`: as specified
Animatable	as each of the properties of the shorthand: `outline-color`: yes, as a color `outline-width`: yes, as a length `outline-style`: não
Canonical order	order of appearance in the formal grammar of the values

Sintaxe

/* largura | estilo | cor */
outline: 1px solid white;

/* Valores globais */
outline: inherit;
outline: initial;
outline: unset;

Valores

Um, dois ou três valores, dada em ordem arbitrária:

<'outline-width'>: Veja outline-width.
<'outline-style'>: Veja outline-style.
<'outline-color'>: Desde Gecko 1.9 (Firefox 3), o valor da propriedade color (cor de primeiro plano) é usado. Veja outline-color.

Sintaxe completa

[ <'outline-color'> || <'outline-style'> || <'outline-width'> ]

Exemplos

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

/* duas declarações identicas */

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

Especificações

Especificação	Estado	Comentário
CSS Basic User Interface Module Level 3 The definition of 'outline' in that specification.	Candidate Recommendation	No change
CSS Level 2 (Revision 1) The definition of 'outline' in that specification.	Recommendation	Initial definition

Feature	Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari (WebKit)
Basic support	1.0	1.5 (1.8)^[1]	8.0	7.0	1.2 (125)

Feature	Android	Firefox Mobile (Gecko)	IE Phone	Opera Mobile	Safari Mobile
Basic support	1.0	1.0 (1.8) [1]	8.0	6.0	3.1

[1] Em navegadores anteriores à Gecko 1.8 (Firefox 1.5) um efeito semelhante pode ser conseguido utilizando Mozilla CSS Extension -moz-outline.

Firefox inclui elementos posicionados absolutamente dentro do contorno (bug 687311).