---
title: border-left
slug: Web/CSS/border-left
tags:
  - Referencia_CSS
translation_of: Web/CSS/border-left
---
<p>
{{ CSSRef() }}
</p>
<h3 id="Resumo" name="Resumo"> Resumo </h3>
<p>A propriedade <code>border-left</code> é uma propriedade <i>shorthand</i> para configurar a largura, estilo e cor da borda esquerda de uma caixa. Esta propriedade pode ser usada para configurar um ou mais valores de {{ Cssxref("border-left-width") }}, {{ Cssxref("border-left-style") }} e {{ Cssxref("border-left-color") }}. Valores omitidos são configurados com o valor inicial.
</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: veja propriedades individuais
</li></ul>
<h3 id="Sintaxe" name="Sintaxe"> Sintaxe </h3>
<pre class="eval">border-left: [<i>border-width</i> || <i>border-style</i> || <i>border-color</i> | <i>inherit</i>] ;
</pre>
<h3 id="Valores" name="Valores"> Valores </h3>
<dl><dt> border-width </dt><dd> Veja {{ Cssxref("border-width") }}.
</dd><dt> border-style </dt><dd> Veja {{ Cssxref("border-style") }}.
</dd><dt> border-color </dt><dd> Veja {{ Cssxref("border-color") }}.
</dd></dl>
<h3 id="Exemplos" name="Exemplos"> Exemplos </h3>
<pre>element {
    border-left: 1px solid #000;
}
</pre>
<h3 id="Notas" name="Notas"> Notas </h3>
<p>Se a regra não especificar uma cor de borda, a borda terá a cor especificada pela propriedade {{ Cssxref("color") }}.
</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-left">CSS 1</a>
</li><li> <a class="external" href="http://www.w3.org/TR/CSS21/box.html#propdef-border-left">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-left") }}
</p><p><span class="comment">Categorias</span>
</p><p><span class="comment">Interwiki Language Links</span>
</p>{{ languages( { "en": "en/CSS/border-left", "fr": "fr/CSS/border-left", "pl": "pl/CSS/border-left" } ) }}