border-left

  • Revision slug: CSS/border-left
  • Revision title: border-left
  • Revision id: 20911
  • Created:
  • Creator: teoli
  • Is current revision? No
  • Comment 372 words added, 88 words removed

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() }}: see individual properties for details
  • Applies to: all elements
  • {{ Xref_cssinherited() }}: no
  • Percentages: N/A
  • Media: {{ Xref_cssvisual() }}
  • {{ Xref_csscomputed() }}: see individual properties

Syntax

border-left: [ <border-width> || <border-style> || <border-color> ] | inherit

where:

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

Examples

{{ CSSRefExampleLink("border") }}

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

Specifications

Specification Status Comment
CSS Backgrounds and Borders Module Level 3 {{ Spec2('CSS3 Backgrounds') }} No direct changes, though the modification of values for the {{ cssxref("border-left-color") }} do apply to it.
CSS 2.1 {{ Spec2('CSS2.1') }} No significant changes
CSS 1 {{ 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

  • The overall {{ Cssxref("border") }} shorthand CSS property.
  • The left-border-related CSS properties: {{ Cssxref("border-left-width") }}, {{ Cssxref("border-left-style") }}, {{ Cssxref("border-left-color") }},

{{ 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" } ) }}

Revision Source

<p>{{ CSSRef() }}</p>
<h2 name="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>
<div class="note"> <p>The three values of the shorthand property can be specified in any order, and one or two of them may be omitted.</p> <p>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:</p> <pre>  border-left-style: dotted;
  border-left: thick green;
</pre> is actually the same as <pre>  border-left-style: dotted;
  border-left: none thick green;
</pre> and the value of {{ Cssxref("border-left-style") }} given before <code>border-left</code> is ignored. <p> </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> <li>{{ Xref_cssinitial() }}: see individual properties for details</li> <li>Applies to: all elements</li> <li>{{ Xref_cssinherited() }}: no</li> <li>Percentages: N/A</li> <li>Media: {{ Xref_cssvisual() }}</li> <li>{{ Xref_csscomputed() }}: see individual properties</li>
</ul>
<h2 name="Syntax">Syntax</h2>
<pre class="eval">border-left: [ &lt;border-width&gt; || &lt;border-style&gt; || &lt;border-color&gt; ] | <em>inherit</em>
</pre>
<p>where:</p>
<dl> <dt>&lt;border-width&gt; </dt> <dd>See {{ Cssxref("border-left-width") }}.</dd> <dt>&lt;border-style&gt; </dt> <dd>See {{ Cssxref("border-left-style") }}.</dd> <dt>&lt;border-color&gt; </dt> <dd>See {{ Cssxref("border-left-color") }}.</dd>
</dl>
<h2 name="Examples">Examples</h2>
<p>{{ CSSRefExampleLink("border") }}</p>
<pre>element { 
    border-left: 1px solid #000;
}
</pre>
<h2 name="Specifications">Specifications</h2>
<table class="standard-table"> <thead> <tr style="background-color: rgb(255, 204, 255);"> <th scope="col">Specification</th> <th scope="col">Status</th> <th scope="col">Comment</th> </tr> </thead> <tbody> <tr> <td><a class="external" href="http://www.w3.org/TR/css3-background/#background-left" title="http://www.w3.org/TR/css3-background/#background-left">CSS Backgrounds and Borders Module Level 3</a></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><a class="external" href="http://www.w3.org/TR/CSS21/box.html#propdef-border-left" title="http://www.w3.org/TR/CSS21/box.html#propdef-border-left">CSS 2.1</a></td> <td>{{ Spec2('CSS2.1') }}</td> <td>No significant changes</td> </tr> <tr> <td><a class="external" href="http://www.w3.org/TR/CSS1/#border-left" title="http://www.w3.org/TR/CSS1/#border-left">CSS 1</a></td> <td>{{ Spec2('CSS1') }}</td> <td> </td> </tr> </tbody>
</table>
<h2 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 name="See_also">See also</h2>
<ul> <li>The overall {{ Cssxref("border") }} shorthand CSS property.</li> <li>The left-border-related CSS properties: {{ Cssxref("border-left-width") }}, {{ Cssxref("border-left-style") }}, {{ Cssxref("border-left-color") }},</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" } ) }}</p>
Revert to this revision