1 files changed, 135 insertions, 0 deletions
diff --git a/files/pt-br/web/css/outline/index.html b/files/pt-br/web/css/outline/index.html
new file mode 100644
index 0000000000..905cf7315a
--- /dev/null
+++ b/files/pt-br/web/css/outline/index.html
@@ -0,0 +1,135 @@
+---
+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>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<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>