Sumário

A propriedadeCSSoutline é uma propriedade abreviada para configurar uma ou mais das propriedades de contornooutline-style,outline-width eoutline-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

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'>

Vejaoutline-width.

<'outline-style'>

Vejaoutline-style.

<'outline-color'>

Desde Gecko 1.9 (Firefox 3), o valor da propriedadecolor (cor de primeiro plano) é usado. Vejaoutline-color.

Sintaxe completa

outline =
<'outline-width'>||
<'outline-style'>||
<'outline-color'>

<outline-width> =
<line-width>

<outline-style> =
auto|
<outline-line-style>

<outline-color> =
auto|
<'border-top-color'>

<line-width> =
<length [0,∞]>|
thin|
medium|
thick

<border-top-color> =
<color>|
<image-1D>

<image-1D> =
<stripes()>

<stripes()> =
stripes(<color-stripe>#)

<color-stripe> =
<color>&&
[<length-percentage>|<flex>]?

<length-percentage> =
<length>|
<percentage>

Exemplos

/* duas declarações identicas */:link:hover {  outline: 1px solid #000;}:link:hover {  outline: solid black 1px;}

Especificações

Compatibilidade com navegadores