---
title: border-left
slug: Web/CSS/border-left
translation_of: Web/CSS/border-left
---
<p>{{CSSRef}}</p>

<h2 id="Resumo">Resumo</h2>

<p>O propriedade <strong><code>border-left</code></strong> <a href="/en/CSS" title="CSS">CSS</a> é um atalho que define os valores de {{ Cssxref("border-left-color") }}, {{ Cssxref("border-left-style") }}, e {{ Cssxref("border-left-width") }}. Estas propriedades descrevem a borda esquerda de elementos.</p>

<p>Os três valores da propriedade estenográfica pode ser especificada em qualquer ordem, e um ou dois deles podem ser omitidos.</p>

<div class="note">Tal como acontece com todas as propriedades abreviadas, fronteira esquerda sempre define os valores de todas as propriedades que podem ser definidas, ainda que não são especificadas. Ele define aqueles que não são especificados para os valores padrão. Isso significa que:
<pre class="brush: css">  border-left-style: dotted;
  border-left: thick green;
</pre>

<p>é o mesmo que</p>

<pre class="brush: css">  border-left-style: dotted;
  border-left: none thick green;
</pre>

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

<p>Uma vez que o valor padrão de {{ Cssxref("border-left-style") }} é <code>none</code>, não especificando o border-style parte do valor significa que a propriedade especifica o valor padrão que é none e não significa nenhum border.</p>
</div>

<p>{{cssinfo}}</p>

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

<pre class="brush:css">border-left: 1px;
border-left: 2px dotted;
border-left: medium dashed green;
</pre>

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

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

<h3 id="Sintaxe_formal">Sintaxe formal</h3>

<pre class="syntaxbox">{{csssyntax}}</pre>

<h2 id="Example" name="Example">Exemplo</h2>

<h3 id="HTML">HTML</h3>

<pre class="brush: html">&lt;div class='box'&gt;
  &lt;p&gt;This box has a border on the left side.&lt;/p&gt;
&lt;/div&gt;</pre>

<h3 id="CSS">CSS</h3>

<pre class="brush: css">.box {
  background-color: #ffaabb;
  border-left: 4px solid #000;
  height: 100px;
  width: 100px;
}

.box p {
  font-weight: bold;
  text-align: center;
}</pre>

<p>{{ EmbedLiveSample('Example') }}</p>

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

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Especificação</th>
   <th scope="col">Status</th>
   <th scope="col">Comentário</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{ SpecName('CSS3 Backgrounds', '#border-left', 'border-left') }}</td>
   <td>{{ Spec2('CSS3 Backgrounds') }}</td>
   <td>Não ocorreram alterações diretas, através da alteração dos valores para o {{ cssxref("border-left-color") }} se aplicam a ele.</td>
  </tr>
  <tr>
   <td>{{ SpecName('CSS2.1', 'box.html#propdef-border-left', 'border-left') }}</td>
   <td>{{ Spec2('CSS2.1') }}</td>
   <td>Sem alterações significativas</td>
  </tr>
  <tr>
   <td>{{ SpecName('CSS1', '#border-left', 'border-left') }}</td>
   <td>{{ Spec2('CSS1') }}</td>
   <td>Definição inicial</td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilidade do browser</h2>

<p>{{CompatibilityTable}}</p>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Característica</th>
   <th>Chrome</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari (WebKit)</th>
  </tr>
  <tr>
   <td>Suporte básico</td>
   <td>1.0</td>
   <td>{{ CompatGeckoDesktop("1.0") }}</td>
   <td>4</td>
   <td>3.5</td>
   <td>1.0 (85)</td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Característica</th>
   <th>Android</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>IE Phone</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>Suporte básico</td>
   <td>1.0</td>
   <td>{{ CompatGeckoMobile("1.0") }}</td>
   <td>{{ CompatVersionUnknown() }}</td>
   <td>{{ CompatVersionUnknown() }}</td>
   <td>{{ CompatVersionUnknown() }}</td>
  </tr>
 </tbody>
</table>
</div>