outline

Baseline 2023
Newly available

Since March 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

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 valueas each of the properties of the shorthand:
Aplica-se aall elements
Inheritednão
Computed valueas each of the properties of the shorthand:
  • outline-width: an absolute length; if the keyword none is specified, the computed value is 0
  • outline-style: as specified
  • outline-color: For the keyword auto, the computed value is currentcolor. 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 rgba(0,0,0,0).
Animation typeas each of the properties of the shorthand:

Sintaxe

css
/* 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 = 
<'outline-width'> ||
<'outline-style'> ||
<'outline-color'>

<outline-width> =
<line-width>

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

<outline-color> =
auto |
<color> |
<image-1D>

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

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

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

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

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

Exemplos

css
/* duas declarações identicas */

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

Especificações

Specification
CSS Basic User Interface Module Level 4
# outline

Compatibilidade com navegadores

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
outline

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Partial support
Partial support
Requires a vendor prefix or different name for use.
Has more compatibility info.