---
title: border-bottom
slug: Web/CSS/border-bottom
tags:
  - Referencia_CSS
translation_of: Web/CSS/border-bottom
---
<p>{{ CSSRef() }}</p>

<h3 id="Resumo" name="Resumo">Resumo</h3>

<p>A propriedade <code>border-bottom</code> é uma propriedade<em>shorthand</em> que configura os valores de {{ Cssxref("border-bottom-color") }}, {{ Cssxref("border-bottom-style") }} e {{ Cssxref("border-bottom-width") }}. Estas propriedades descrevem a borda inferior de elementos.</p>

<ul>
 <li>Valor inicial: veja as propriedades individuais para detalhes</li>
 <li>Aplica-se a: todos os elementos</li>
 <li>Herdado: não</li>
 <li>Porcentagens: N/A</li>
 <li>Mídia: <a href="pt/CSS/Media/Visual">visual</a></li>
 <li>Valor computado: ver propriedades individuais</li>
</ul>

<h3 id="Sintaxe" name="Sintaxe">Sintaxe</h3>

<pre class="eval">border-bottom: [ &lt;border-width&gt; || &lt;border-style&gt; || &lt;border-color&gt; ] |<em>inherit</em>
</pre>

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

<dl>
 <dt>&lt;border-width&gt; </dt>
 <dd>Veja {{ Cssxref("border-bottom-width") }}.</dd>
 <dt>&lt;border-style&gt; </dt>
 <dd>Veja {{ Cssxref("border-bottom-style") }}.</dd>
 <dt>&lt;border-color&gt; </dt>
 <dd>Veja {{ Cssxref("border-bottom-color") }}.</dd>
</dl>

<h3 id="Exemplos" name="Exemplos">Exemplos</h3>

<p><a href="/samples/cssref/border.html">View Live Examples</a></p>

<pre>element {
    border-bottom-width: 1px solid #000;
}
</pre>

<h3 id="Notas" name="Notas">Notas</h3>

<p>Os três valores da propriedade<em>shorthand</em> podem ser especificados em qualquer ordem e um ou dois deles podem ser omitidos.</p>

<p>Como com todas as propriedades<em>shorthand</em>, <code>border-bottom</code> sempre configura os valores de todas as propriedades que ele pode configurar, ainda que elas não sejam especificadas. Ele configura as que não especificadas para os seus valores padrão. De maneira que:</p>

<pre>  border-bottom-style: dotted;
  border-bottom: thick green;</pre>

<p>é realmente o mesmo que</p>

<pre>  border-bottom-style: dotted;
  border-bottom: none thick green;</pre>

<p>e o valor de {{ Cssxref("border-bottom-style") }} dado antes <code>border-bottom</code> é ignorado.</p>

<p>Desde que o valor padrão de {{ Cssxref("border-bottom-style") }} seja <code>none</code>, não especificar o &lt;border-style&gt; torna o valor, o mesmo que a propriedade especifica na borda.</p>

<h3 id="Especifica.C3.A7.C3.B5es" name="Especifica.C3.A7.C3.B5es">Especificações</h3>

<ul>
 <li><a class="external" href="http://www.w3.org/TR/CSS1#border-bottom">CSS 1</a></li>
 <li><a class="external" href="http://www.w3.org/TR/CSS21/box.html#border-shorthand-properties">CSS 2.1</a></li>
 <li><a class="external" href="http://www.w3.org/TR/css3-background/#the-border-shorthands">CSS 3</a></li>
</ul>

<h3 id="Compatibilidade_com_navegadores" name="Compatibilidade_com_navegadores">Compatibilidade com navegadores</h3>

<table class="standard-table">
 <tbody>
  <tr>
   <th>Navegador</th>
   <th>Versão mais antiga</th>
  </tr>
  <tr>
   <td>Internet Explorer</td>
   <td>4</td>
  </tr>
  <tr>
   <td>Firefox</td>
   <td>1</td>
  </tr>
  <tr>
   <td>Netscape</td>
   <td>4</td>
  </tr>
  <tr>
   <td>Opera</td>
   <td>3.5</td>
  </tr>
 </tbody>
</table>

<h3 id="Veja_tamb.C3.A9m" name="Veja_tamb.C3.A9m">Veja também</h3>

<p>{{ Cssxref("border") }}, {{ Cssxref("border-bottom") }}, {{ Cssxref("border-bottom-width") }}, {{ Cssxref("border-bottom-style") }}, {{ Cssxref("border-bottom-color") }},</p>

<p><span class="comment">Categorias</span></p>

<p><span class="comment">Interwiki Language Links</span></p>

<p>{{ languages( { "en": "en/CSS/border-bottom", "fr": "fr/CSS/border-bottom", "pl": "pl/CSS/border-bottom" } ) }}</p>