---
title: outline
slug: Web/CSS/outline
translation_of: Web/CSS/outline
---
<div>{{CSSRef}}</div>

<h2 id="Sumário">Sumário</h2>

<p>A propriedade <a href="/en-US/docs/CSS">CSS</a> <strong><code>outline</code></strong> é uma propriedade abreviada para configurar uma ou mais das propriedades de contorno {{cssxref("outline-style")}}, {{cssxref("outline-width")}} e {{cssxref("outline-color")}} em uma única declaração. Na maioria dos casos o uso abreviado é preferível e mais conveniente.</p>

<p>Contornos se diferenciam de bordas das seguintes maneiras:</p>

<ul>
 <li>Contornos não ocupam espaços, eles são desenhados acima do conteúdo.</li>
 <li>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:<br>
  <strong style="color: orange;">TEXT<span style="font-size: xx-large;">TEXT</span>TEXT</strong></li>
</ul>

<div>{{cssinfo}}</div>

<h2 id="Sintaxe">Sintaxe</h2>

<pre class="brush: css">/* largura | estilo | cor */
outline: 1px solid white;

/* Valores globais */
outline: inherit;
outline: initial;
outline: unset;
</pre>

<h3 id="Valores">Valores</h3>

<p>Um, dois ou três valores, dada em ordem arbitrária:</p>

<dl>
 <dt><code>&lt;'outline-width'&gt;</code></dt>
 <dd>Veja {{Cssxref("outline-width")}}.</dd>
 <dt><code>&lt;'outline-style'&gt;</code></dt>
 <dd>Veja {{Cssxref("outline-style")}}.</dd>
 <dt><code>&lt;'outline-color'&gt;</code></dt>
 <dd>Desde Gecko 1.9 (Firefox 3), o valor da propriedade {{Cssxref("color")}}  (cor de primeiro plano) é usado. Veja {{Cssxref("outline-color")}}.</dd>
</dl>

<h3 id="Sintaxe_completa">Sintaxe completa</h3>

{{csssyntax}}

<h2 id="Exemplos">Exemplos</h2>

<p><span style="outline: solid;">outline: solid;</span> | <span style="outline: dashed red;">outline: dashed red;</span> | <span style="outline: dotted 1px;">outline: dotted 1px;</span> | <span style="outline: ridge thick violet;">outline: ridge thick violet;</span> | <span style="outline: ridge 5px yellow;">outline: custom 5px;</span></p>

<pre class="brush: css">/* duas declarações identicas */

:link:hover { outline: 1px solid #000; }
:link:hover { outline: solid black 1px; }</pre>

<h2 id="Especificações">Especificações</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Especificação</th>
   <th scope="col">Estado</th>
   <th scope="col">Comentário</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('CSS3 Basic UI', '#outline', 'outline')}}</td>
   <td>{{Spec2('CSS3 Basic UI')}}</td>
   <td>No change</td>
  </tr>
  <tr>
   <td>{{SpecName('CSS2.1', 'ui.html#propdef-outline', 'outline')}}</td>
   <td>{{Spec2('CSS2.1')}}</td>
   <td>Initial definition</td>
  </tr>
 </tbody>
</table>

<h2 id="Compatibilidade_de_Navegadores">Compatibilidade de Navegadores</h2>

<div>{{CompatibilityTable}}</div>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Chrome</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari (WebKit)</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>1.0</td>
   <td>1.5 (1.8)<sup>[1]</sup></td>
   <td>8.0</td>
   <td>7.0</td>
   <td>1.2 (125)</td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Android</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>IE Phone</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>1.0</td>
   <td>{{CompatGeckoMobile(1.8)}} [1]</td>
   <td>8.0</td>
   <td>6.0</td>
   <td>3.1</td>
  </tr>
 </tbody>
</table>
</div>

<p>[1] Em navegadores anteriores à <a href="/en-US/docs/Gecko">Gecko</a> 1.8 (<a href="/en-US/docs/Mozilla/Firefox/Releases/1.5">Firefox 1.5</a>) um efeito semelhante pode ser conseguido utilizando <a href="/en-US/docs/CSS/CSS_Reference/Mozilla_Extensions">Mozilla CSS Extension</a> {{Cssxref("-moz-outline")}}.</p>

<p>Firefox <a href="http://stackoverflow.com/questions/10662902/css-outline-different-behavior-behavior-on-webkit-gecko">inclui elementos posicionados absolutamente dentro do contorno</a> ({{bug("687311")}}).</p>