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

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

<p><code>border-bottom-style</code> configura o estilo da linha da borda inferior de uma caixa.</p>

<ul>
 <li>Valor inicial: none</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: como especificado</li>
</ul>

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

<pre class="eval">border-bottom-style: &lt;border-style&gt; | inherit
</pre>

<h3 id=".3Cborder-style.3E_Valores" name=".3Cborder-style.3E_Valores">&lt;border-style&gt; Valores</h3>

<dl>
 <dt>none </dt>
 <dd>Sem borda.</dd>
 <dt>hidden </dt>
 <dd>O mesmo que 'none', exceto em termos de conflitos na resolução de bordas para elementos de tabela.</dd>
 <dt>dotted </dt>
 <dd>Série de pontos.</dd>
 <dt>dashed </dt>
 <dd>Série de traços ou segmentos de linha.</dd>
 <dt>solid </dt>
 <dd>Simples, reto, linha contínua.</dd>
 <dt>double </dt>
 <dd>Duas linhas retas que adicionam uma quantidade de pixels definida por <code>border-width</code>.</dd>
 <dt>groove </dt>
 <dd>Efeito entalhado.</dd>
 <dt>ridge </dt>
 <dd>Contrário de 'groove'.</dd>
 <dt>inset </dt>
 <dd>Faz a caixa aparecer em baixo relevo.</dd>
 <dt>outset </dt>
 <dd>Contrário de 'inset'. Faz a caixa aparecer em alto relevo.</dd>
</dl>

<h3 id="Propriedades_relacionadas" name="Propriedades_relacionadas">Propriedades relacionadas</h3>

<ul>
 <li>{{ Cssxref("border-left-style") }}</li>
 <li>{{ Cssxref("border-right-style") }}</li>
 <li>{{ Cssxref("border-top-style") }}</li>
 <li>{{ Cssxref("border-style") }}</li>
</ul>

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

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

<pre>element {
        border-bottom-size: 1px;
        border-bottom-style: dotted;
        border-bottom-color: #000;
}
</pre>

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

<p>A menos que seja configurado um valor para <code>border-style</code>, sua borda não aparecerá, pois o valor padrão configurado é 'none'.</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/CSS21/box.html#propdef-border-bottom-style">CSS 2.1</a></li>
 <li><a class="external" href="http://www.w3.org/TR/css3-background/#border-style">CSS 3</a></li>
</ul>

<p><span class="comment">== Compatibilidade com navegadores ==</span></p>

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

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

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

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

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