border-left

  • Revision slug: CSS/border-left
  • Revision title: border-left
  • Revision id: 354763
  • Created:
  • Creator: teoli
  • Is current revision? No
  • Comment

Revision Content

{{ CSSRef() }}

Summary

The border-left CSS property is a shorthand that sets the values of {{ Cssxref("border-left-color") }}, {{ Cssxref("border-left-style") }}, and {{ Cssxref("border-left-width") }}. These properties describe the left border of elements.

The three values of the shorthand property can be specified in any order, and one or two of them may be omitted.

As with all shorthand properties, border-left always sets the values of all of the properties that it can set, even if they are not specified. It sets those that are not specified to their default values. This means that:
  border-left-style: dotted;
  border-left: thick green;

is actually the same as

  border-left-style: dotted;
  border-left: none thick green;

and the value of {{ Cssxref("border-left-style") }} given before border-left is ignored.

Since the default value of {{ Cssxref("border-left-style") }} is none, not specifying the border-style part of the value means that the property specifies its default value which is none and means no border.

  • {{ Xref_cssinitial() }} {{cssinitial("border-left")}}
  • Applies to all elements
  • {{ Xref_cssinherited() }} no
  • Media {{ Xref_cssvisual() }}
  • {{ Xref_csscomputed() }} see individual properties

Syntax

Formal syntax: {{csssyntax("border-left")}}

Values

<br-width> 
See {{ Cssxref("border-left-width") }}.
<br-style> 
See {{ Cssxref("border-left-style") }}.
<color> 
See {{ Cssxref("border-left-color") }}.

Examples

element { 
    border-left: 1px solid #000;
}

Specifications

Specification Status Comment
{{ SpecName('CSS3 Backgrounds', '#border-left', 'border-left') }} {{ Spec2('CSS3 Backgrounds') }} No direct changes, though the modification of values for the {{ cssxref("border-left-color") }} do apply to it.
{{ SpecName('CSS2.1', 'box.html#propdef-border-left', 'border-left') }} {{ Spec2('CSS2.1') }} No significant changes
{{ SpecName('CSS1', '#border-left', 'border-left') }} {{ Spec2('CSS1') }}  

Browser compatibility

{{ CompatibilityTable() }}

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support 1.0 {{ CompatGeckoDesktop("1.0") }} 4 3.5 1.0 (85)
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support 1.0 {{ CompatGeckoMobile("1.0") }} {{ CompatVersionUnknown() }} {{ CompatVersionUnknown() }} {{ CompatVersionUnknown() }}

See also

  • {{ CSS_Reference:Border-left() }}
  • {{ CSS_Reference:Border() }}

{{ languages( { "de": "de/CSS/border-left", "es": "es/CSS/border-left", "fr": "fr/CSS/border-left", "ja": "ja/CSS/border-left", "pl": "pl/CSS/border-left", "pt":"pt/CSS/border-left" } ) }}

Revision Source

<p>{{ CSSRef() }}</p>
<h2 id="Summary">Summary</h2>
<p>The <code>border-left</code> <a href="/en/CSS" title="CSS">CSS</a> property is a shorthand that sets the values of {{ Cssxref("border-left-color") }}, {{ Cssxref("border-left-style") }}, and {{ Cssxref("border-left-width") }}. These properties describe the left border of elements.</p>
<p>The three values of the shorthand property can be specified in any order, and one or two of them may be omitted.</p>
<div class="note">
  As with all shorthand properties, <code>border-left</code> always sets the values of all of the properties that it can set, even if they are not specified. It sets those that are not specified to their default values. This means that:
  <pre class="brush: css">
  border-left-style: dotted;
  border-left: thick green;
</pre>
  <p>is actually the same as</p>
  <pre class="brush: css">
  border-left-style: dotted;
  border-left: none thick green;
</pre>
  <p>and the value of {{ Cssxref("border-left-style") }} given before <code>border-left</code> is ignored.</p>
  <p>Since the default value of {{ Cssxref("border-left-style") }} is <code>none</code>, not specifying the border-style part of the value means that the property specifies its default value which is <code>none</code> and means no border.</p>
</div>
<ul class="cssprop">
  <li><dfn>{{ Xref_cssinitial() }}</dfn> {{cssinitial("border-left")}}</li>
  <li><dfn>Applies to</dfn> all elements</li>
  <li><dfn>{{ Xref_cssinherited() }}</dfn> no</li>
  <li><dfn>Media</dfn> {{ Xref_cssvisual() }}</li>
  <li><dfn>{{ Xref_csscomputed() }}</dfn> see individual properties</li>
</ul>
<h2 id="Syntax" name="Syntax">Syntax</h2>
<pre class="syntaxbox">
<a href="/en-US/docs/CSS/Value_definition_syntax" title="/en-US/docs/CSS/Value_definition_syntax">Formal syntax</a>: {{csssyntax("border-left")}}</pre>
<h3>Values</h3>
<dl>
  <dt>
    &lt;br-width&gt;&nbsp;</dt>
  <dd>
    See {{ Cssxref("border-left-width") }}.</dd>
  <dt>
    &lt;br-style&gt;&nbsp;</dt>
  <dd>
    See {{ Cssxref("border-left-style") }}.</dd>
  <dt>
    &lt;color&gt;&nbsp;</dt>
  <dd>
    See {{ Cssxref("border-left-color") }}.</dd>
</dl>
<h2 id="Examples" name="Examples">Examples</h2>
<pre class="brush: css">
element { 
    border-left: 1px solid #000;
}
</pre>
<h2 id="Specifications" name="Specifications">Specifications</h2>
<table class="standard-table">
  <thead>
    <tr>
      <th scope="col">Specification</th>
      <th scope="col">Status</th>
      <th scope="col">Comment</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>{{ SpecName('CSS3 Backgrounds', '#border-left', 'border-left') }}</td>
      <td>{{ Spec2('CSS3 Backgrounds') }}</td>
      <td>No direct changes, though the modification of values for the {{ cssxref("border-left-color") }} do apply to it.</td>
    </tr>
    <tr>
      <td>{{ SpecName('CSS2.1', 'box.html#propdef-border-left', 'border-left') }}</td>
      <td>{{ Spec2('CSS2.1') }}</td>
      <td>No significant changes</td>
    </tr>
    <tr>
      <td>{{ SpecName('CSS1', '#border-left', 'border-left') }}</td>
      <td>{{ Spec2('CSS1') }}</td>
      <td>&nbsp;</td>
    </tr>
  </tbody>
</table>
<h2 id="Browser_compatibility" name="Browser_compatibility">Browser compatibility</h2>
<p>{{ CompatibilityTable() }}</p>
<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>{{ 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>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.0") }}</td>
        <td>{{ CompatVersionUnknown() }}</td>
        <td>{{ CompatVersionUnknown() }}</td>
        <td>{{ CompatVersionUnknown() }}</td>
      </tr>
    </tbody>
  </table>
</div>
<h2 id="See_also" name="See_also">See also</h2>
<ul>
  <li>{{ CSS_Reference:Border-left() }}</li>
  <li>{{ CSS_Reference:Border() }}</li>
</ul>
<p>{{ languages( { "de": "de/CSS/border-left", "es": "es/CSS/border-left", "fr": "fr/CSS/border-left", "ja": "ja/CSS/border-left", "pl": "pl/CSS/border-left", "pt":"pt/CSS/border-left" } ) }}</p>
Revert to this revision