Compare Revisions

border-left

Change Revisions

Revision 20910:

Revision 20910 by teoli on

Revision 20911:

Revision 20911 by teoli on

Title:
border-left
border-left
Slug:
CSS/border-left
CSS/border-left
Tags:
css, "CSS Reference"
css, "CSS Reference"
Content:

Revision 20910
Revision 20911
n10    <h3 name="Summary">n10    <h2 name="Summary">
n12    </h3>n12    </h2>
13    <p>
14      The <code>border-left</code> <a href="/en/CSS" title="CSS">
>CSS</a> property is a shorthand for setting the width, style and  
>color of left border of a box. This property can be used to set t 
>he values for one or more of: {{ Cssxref("border-left-width") }}, 
> {{ Cssxref("border-left-style") }}, {{ Cssxref("border-left-colo 
>r") }}. Omitted values are set to their initial values. 
15    </p>13    <p>
14      The <code>border-left</code> <a href="/en/CSS" title="CSS">
 >CSS</a> property is a shorthand that sets the values of {{ Cssxre
 >f("border-left-color") }}, {{ Cssxref("border-left-style") }}, an
 >d {{ Cssxref("border-left-width") }}. These properties describe t
 >he left border of elements.
15    </p>
16    <div class="note">
17      <p>
18        The three values of the shorthand property can be specifi
 >ed in any order, and one or two of them may be omitted.
19      </p>
20      <p>
21        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 spec
 >ified to their default values. This means that:
22      </p>
23      <pre>
24  border-left-style: dotted;
25  border-left: thick green;
26</pre>is actually the same as
27      <pre>
28  border-left-style: dotted;
29  border-left: none thick green;
30</pre>and the value of {{ Cssxref("border-left-style") }} given b
 >efore <code>border-left</code> is ignored.
31      <p>
32        &nbsp;
33      </p>
34      <p>
35        Since the default value of {{ Cssxref("border-left-style"
 >) }} is <code>none</code>, not specifying the border-style part o
 >f the value means that the property specifies its default value w
 >hich is <code>none</code> and means no border.
36      </p>
37    </div>
n30    <h3 name="Syntax">n52    <h2 name="Syntax">
n32    </h3>n54    </h2>
n34border-left: [<em>border-width</em> || <em>border-style</em> || <n56border-left: [ &lt;border-width&gt; || &lt;border-style&gt; || &l
>em>border-color</em> | <em>inherit</em>] ;>t;border-color&gt; ] | <em>inherit</em>
n36    <h3 name="Values">n58    <p>
37      Values59      where:
38    </h3>60    </p>
n41        border-widthn63        &lt;border-width&gt;&nbsp;
n44        See {{ Cssxref("border-width") }}.n66        See {{ Cssxref("border-left-width") }}.
n47        border-style&nbsp;n69        &lt;border-style&gt;&nbsp;
n50        See {{ Cssxref("border-style") }}.n72        See {{ Cssxref("border-left-style") }}.
n53        border-color&nbsp;n75        &lt;border-color&gt;&nbsp;
n56        See {{ Cssxref("border-color") }}.n78        See {{ Cssxref("border-left-color") }}.
n59    <h3 name="Examples">n81    <h2 name="Examples">
n61    </h3>n83    </h2>
84    <p>
85      {{ CSSRefExampleLink("border") }}
86    </p>
n67    <h3 name="Notes">n
68      Notes
69    </h3>
70    <p>
71      If the rule does not specify a border color, the border wil
>l have the color specified by the {{ Cssxref("color") }} property 
>. 
72    </p>
73    <h3 name="Specifications">92    <h2 name="Specifications">
n75    </h3>n94    </h2>
76    <ul>
77      <li>
78        <a class="external" href="http://www.w3.org/TR/CSS1#borde
>r-left">CSS 1</a> 
79      </li>
80      <li>
81        <a class="external" href="http://www.w3.org/TR/CSS21/box.
>html#propdef-border-left">CSS 2.1</a> 
82      </li>
83      <li>
84        <a class="external" href="http://www.w3.org/TR/css3-backg
>round/#the-border-shorthands">CSS 3</a> 
85      </li>
86    </ul>
87    <h3 name="Browser_compatibility">
88      Browser compatibility
89    </h3>
nn96      <thead>
97        <tr style="background-color: rgb(255, 204, 255);">
98          <th scope="col">
99            Specification
100          </th>
101          <th scope="col">
102            Status
103          </th>
104          <th scope="col">
105            Comment
106          </th>
107        </tr>
108      </thead>
n93          <th>n111          <td>
94            Browser112            <a class="external" href="http://www.w3.org/TR/css3-b
 >ackground/#background-left" title="http://www.w3.org/TR/css3-back
 >ground/#background-left">CSS Backgrounds and Borders Module Level
 > 3</a>
95          </th>113          </td>
96          <th>114          <td>
97            Lowest Version115            {{ Spec2('CSS3 Backgrounds') }}
98          </th>116          </td>
117          <td>
118            No direct changes, though the modification of values 
 >for the {{ cssxref("border-left-color") }} do apply to it.
119          </td>
n102            Chromen123            <a class="external" href="http://www.w3.org/TR/CSS21/
 >box.html#propdef-border-left" title="http://www.w3.org/TR/CSS21/b
 >ox.html#propdef-border-left">CSS 2.1</a>
103          </td>
104          <td>124          </td>
105            1.0125          <td>
126            {{ Spec2('CSS2.1') }}
127          </td>
128          <td>
129            No significant changes
n110            Firefoxn134            <a class="external" href="http://www.w3.org/TR/CSS1/#
 >border-left" title="http://www.w3.org/TR/CSS1/#border-left">CSS 1
 ></a>
111          </td>
112          <td>135          </td>
113            1
114          </td>136          <td>
115        </tr>137            {{ Spec2('CSS1') }}
116        <tr>
117          <td>138          </td>
118            Internet Explorer
119          </td>139          <td>
120          <td>
121            4140            &nbsp;
122          </td>
123        </tr>
124        <tr>
125          <td>
126            Netscape
127          </td>
128          <td>
129            4
130          </td>
131        </tr>
132        <tr>
133          <td>
134            Opera
135          </td>
136          <td>
137            3.5
nn145    <h2 name="Browser_compatibility">
146      Browser compatibility
147    </h2>
148    <p>
149      {{ CompatibilityTable() }}
150    </p>
151    <div id="compat-desktop">
152      <table class="compat-table">
153        <tbody>
154          <tr>
155            <th>
156              Feature
157            </th>
158            <th>
159              Chrome
160            </th>
161            <th>
162              Firefox (Gecko)
163            </th>
164            <th>
165              Internet Explorer
166            </th>
167            <th>
168              Opera
169            </th>
170            <th>
171              Safari (WebKit)
172            </th>
173          </tr>
174          <tr>
175            <td>
176              Basic support
177            </td>
178            <td>
179              1.0
180            </td>
181            <td>
182              {{ CompatGeckoDesktop("1.0") }}
183            </td>
184            <td>
185              4
186            </td>
187            <td>
188              3.5
189            </td>
190            <td>
191              1.0 (85)
192            </td>
193          </tr>
194        </tbody>
195      </table>
196    </div>
197    <div id="compat-mobile">
198      <table class="compat-table">
199        <tbody>
200          <tr>
201            <th>
202              Feature
203            </th>
204            <th>
205              Android
206            </th>
207            <th>
208              Firefox Mobile (Gecko)
209            </th>
210            <th>
211              IE Phone
212            </th>
213            <th>
214              Opera Mobile
215            </th>
216            <th>
217              Safari Mobile
218            </th>
219          </tr>
220          <tr>
221            <td>
222              Basic support
223            </td>
224            <td>
225              1.0
226            </td>
227            <td>
228              {{ CompatGeckoMobile("1.0") }}
229            </td>
230            <td>
231              {{ CompatVersionUnknown() }}
232            </td>
233            <td>
234              {{ CompatVersionUnknown() }}
235            </td>
236            <td>
237              {{ CompatVersionUnknown() }}
238            </td>
239          </tr>
240        </tbody>
241      </table>
242    </div>
142    <h3 name="See_also">243    <h2 name="See_also">
t144    </h3>t245    </h2>
145    <p>246    <ul>
146      {{ CSS_Reference:Border() }}247      <li>The overall {{ Cssxref("border") }} shorthand CSS prope
 >rty.
248      </li>
249      <li>The left-border-related CSS properties: {{ Cssxref("bor
 >der-left-width") }}, {{ Cssxref("border-left-style") }}, {{ Cssxr
 >ef("border-left-color") }},
250      </li>
147    </p>251    </ul>
148    <p>
149      {{ CSS_Reference:Border-left() }}
150    </p>

Back to History