border-left

  • Revision slug: CSS/border-left
  • Revision title: border-left
  • Revision id: 20908
  • Created:
  • Creator: grendel
  • Is current revision? No
  • Comment Added Chrome to the compatibility table. Arranged rows by alphabetical order.; 5 words added, 3 words removed

Revision Content

{{ CSSRef() }}

Summary

The border-left is a shorthand property for setting the width, style and color of left border of a box. This property can be used to set the values for one or more of: {{ Cssxref("border-left-width") }}, {{ Cssxref("border-left-style") }}, {{ Cssxref("border-left-color") }}. Omitted values are set to their initial values.

  • {{ 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] ;

Values

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

Examples

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

Notes

If the rule does not specify a border color, the border will have the color specified by the {{ Cssxref("color") }} property.

Specifications

Browser compatibility

Browser Lowest Version
Chrome 1.0
Firefox 1
Internet Explorer 4
Netscape 4
Opera 3.5

See also

{{ CSS_Reference:Border() }}

{{ CSS_Reference:Border-left() }}

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

Revision Source

<p>{{ CSSRef() }}</p>
<h3 name="Summary">Summary</h3>
<p>The <code>border-left</code> is a shorthand property for setting the width, style and color of left border of a box. This property can be used to set the values for one or more of: {{ Cssxref("border-left-width") }}, {{ Cssxref("border-left-style") }}, {{ Cssxref("border-left-color") }}. Omitted values are set to their initial values.</p>
<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>
<h3 name="Syntax">Syntax</h3>
<pre class="eval">border-left: [<em>border-width</em> || <em>border-style</em> || <em>border-color</em> | <em>inherit</em>] ;
</pre>
<h3 name="Values">Values</h3>
<dl> <dt>border-width</dt> <dd>See {{ Cssxref("border-width") }}.</dd> <dt>border-style </dt> <dd>See {{ Cssxref("border-style") }}.</dd> <dt>border-color </dt> <dd>See {{ Cssxref("border-color") }}.</dd>
</dl>
<h3 name="Examples">Examples</h3>
<pre>element { 
    border-left: 1px solid #000;
}
</pre>
<h3 name="Notes">Notes</h3>
<p>If the rule does not specify a border color, the border will have the color specified by the {{ Cssxref("color") }} property.</p>
<h3 name="Specifications">Specifications</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 name="Browser_compatibility">Browser compatibility</h3>
<table class="standard-table"> <tbody> <tr> <th>Browser</th> <th>Lowest Version</th> </tr> <tr> <td>Chrome</td> <td>1.0</td> </tr> <tr> <td>Firefox</td> <td>1</td> </tr> <tr> <td>Internet Explorer</td> <td>4</td> </tr> <tr> <td>Netscape</td> <td>4</td> </tr> <tr> <td>Opera</td> <td>3.5</td> </tr> </tbody>
</table>
<h3 name="See_also">See also</h3>
<p>{{ CSS_Reference:Border() }}</p>
<p>{{ CSS_Reference:Border-left() }}</p>
<p>{{ languages( { "de": "de/CSS/border-left", "es": "es/CSS/border-left", "fr": "fr/CSS/border-left", "pl": "pl/CSS/border-left" } ) }}</p>
Revert to this revision