mozilla

Compare Revisions

border-left-style

Change Revisions

Revision 20879:

Revision 20879 by teoli on

Revision 20880:

Revision 20880 by teoli on

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

Revision 20879
Revision 20880
n10    <h3 name="Summary">n10    <h2 name="Summary">
n12    </h3>n12    </h2>
t14      The <code>border-left-style</code> <a href="/en/CSS" title=t14      The <code>border-left-style</code> <a href="/en/CSS" title=
>"CSS">CSS</a> property sets the line style of the left border of >"CSS">CSS</a> property sets the line style of the bottom border o
>a box.>f a box.
15    </p>
16    <p>15    </p>
17      See the {{ Cssxref("border-bottom-style") }} property for m16    <div class="note">
>ore information. 
17      The specification doesn't define how borders of different s
 >tyle connect in the corners.
18    </div>
19    <ul class="cssprop">
20      <li>{{ Xref_cssinitial() }}: {{ Cssxref("none") }}
21      </li>
22      <li>Applies to: all elements
23      </li>
24      <li>{{ Xref_cssinherited() }}: no
25      </li>
26      <li>Percentages: N/A
27      </li>
28      <li>Media: {{ Xref_cssvisual() }}
29      </li>
30      <li>{{ Xref_csscomputed() }}: as specified
31      </li>
32    </ul>
33    <h2 name="Syntax">
34      Syntax
35    </h2>
36    <pre class="eval syntaxbox">
37border-left-style: <em>border-style</em>       <em>or
38</em>border-left-style: inherit
39</pre>
18    </p>40    <p>
41      where:
42    </p>
43    <dl>
44      <dt>
45        <em>border-style</em>
46      </dt>
47      <dd>
48        Is a keyword describing the style of the bottom border. I
 >t can have the following values:
49        <table class="standard-table">
50          <tbody>
51            <tr>
52              <td style="vertical-align:middle;">
53                <code>none</code>
54              </td>
55              <td style="vertical-align:middle;">
56                <div style="margin:0.5em; width:3em; height:3em; 
 >border-left-style:none; background-color:palegreen;">
57                  <span style="display:none;">fake</span>
58                </div>
59              </td>
60              <td style="vertical-align:middle;">
61                Like for the <code>hidden</code> keyword, display
 >s no border. In that case, except if a background image is set, t
 >he calculated values of {{ cssxref("border-left-width") }} will b
 >e <code>0</code>, even if specified otherwise through the propert
 >y. In case of table cell and border collapsing, the <code>none</c
 >ode> value has the lowest priority: it means that if any other co
 >nflicting border is set, it will be displayed.
62              </td>
63            </tr>
64            <tr>
65              <td style="vertical-align:middle;">
66                <code>hidden</code>
67              </td>
68              <td style="vertical-align:middle;">
69                <div style="margin:0.5em; width:3em; height:3em; 
 >border-left-style:hidden; background-color:palegreen;">
70                  <span style="display:none;">fake</span>
71                </div>
72              </td>
73              <td style="vertical-align:middle;">
74                Like for the <code>none</code> keyword, displays 
 >no border. In that case, except if a background image is set, the
 > calculated values of {{ cssxref("border-left-width") }} will be 
 ><code>0</code>, even if specified otherwise through the property.
 > In case of table cell and border collapsing, the <code>hidden</c
 >ode> value has the highest priority: it means that if any other c
 >onflicting border is set, it won't be displayed.
75              </td>
76            </tr>
77            <tr>
78              <td style="vertical-align:middle;">
79                <code>dotted</code>
80              </td>
81              <td style="vertical-align:middle;">
82                <div style="margin:0.5em; width:3em; height:3em; 
 >border-left-style:dotted; background-color:palegreen;">
83                  <span style="display:none;">fake</span>
84                </div>
85              </td>
86              <td style="vertical-align:middle;">
87                Displays a series of rounded dots. The spacing of
 > the dots are not defined by the specification and are implementa
 >tion-specific. The radius of the dots is half the calculated {{ c
 >ssxref("border-left-width") }}.
88              </td>
89            </tr>
90            <tr>
91              <td style="vertical-align:middle;">
92                <code>dashed</code>
93              </td>
94              <td style="vertical-align:middle;">
95                <div style="margin:0.5em; width:3em; height:3em; 
 >border-left-style:dashed; background-color:palegreen;">
96                  <span style="display:none;">fake</span>
97                </div>
98              </td>
99              <td style="vertical-align:middle;">
100                Displays a series of short square-ended dashes or
 > line segments. The exact size and length of the segments are not
 > defined by the specification and are implementation-specific.
101              </td>
102            </tr>
103            <tr>
104              <td style="vertical-align:middle;">
105                <code>solid</code>
106              </td>
107              <td style="vertical-align:middle;">
108                <div style="margin:0.5em; width:3em; height:3em; 
 >border-left-style:solid; background-color:palegreen;">
109                  <span style="display:none;">fake</span>
110                </div>
111              </td>
112              <td style="vertical-align:middle;">
113                Displays a single, straight, solid line.
114              </td>
115            </tr>
116            <tr>
117              <td style="vertical-align:middle;">
118                <code>double</code>
119              </td>
120              <td style="vertical-align:middle;">
121                <div style="margin:0.5em; width:3em; height:3em; 
 >border-left-style:double; background-color:palegreen;">
122                  <span style="display:none;">fake</span>
123                </div>
124              </td>
125              <td style="vertical-align:middle;">
126                Displays two straight lines that add up to the pi
 >xel amount defined as {{ cssxref("border-width") }} or {{ cssxref
 >("border-left-width") }}.
127              </td>
128            </tr>
129            <tr>
130              <td style="vertical-align:middle;">
131                <code>groove</code>
132              </td>
133              <td style="vertical-align:middle;">
134                <div style="margin:0.5em; width:3em; height:3em; 
 >border-left-style:groove; background-color:palegreen;">
135                  <span style="display:none;">fake</span>
136                </div>
137              </td>
138              <td style="vertical-align:middle;">
139                Displays a border leading to a carved effect. It 
 >is the opposite of <code>ridge</code>.
140              </td>
141            </tr>
142            <tr>
143              <td style="vertical-align:middle;">
144                <code>ridge</code>
145              </td>
146              <td style="vertical-align:middle;">
147                <div style="margin:0.5em; width:3em; height:3em; 
 >border-left-style:ridge; background-color:palegreen;">
148                  <span style="display:none;">fake</span>
149                </div>
150              </td>
151              <td style="vertical-align:middle;">
152                Displays a border with a 3D effect, like if it is
 > coming out of the page. It is the opposite of <code>groove</code
 >>.
153              </td>
154            </tr>
155            <tr>
156              <td style="vertical-align:middle;">
157                <code>inset</code>
158              </td>
159              <td style="vertical-align:middle;">
160                <div style="margin:0.5em; width:3em; height:3em; 
 >border-left-style:inset; background-color:palegreen;">
161                  <span style="display:none;">fake</span>
162                </div>
163              </td>
164              <td style="vertical-align:middle;">
165                Displays a border that makes the box appear embed
 >ded. It is the opposite of <code>outset</code>. When applied to a
 > table cell with {{ cssxref("border-collapse") }} set to <code>co
 >llapsed</code>, this value behaves like <code>groove</code>.
166              </td>
167            </tr>
168            <tr>
169              <td style="vertical-align:middle;">
170                <code>outset</code>
171              </td>
172              <td style="vertical-align:middle;">
173                <div style="margin:0.5em; width:3em; height:3em; 
 >border-left-style:outset; background-color:palegreen;">
174                  <span style="display:none;">fake</span>
175                </div>
176              </td>
177              <td style="vertical-align:middle;">
178                <p>
179                  Displays a border that makes the box appear in 
 >3D, embossed. It is the opposite of <code>inset</code>. When appl
 >ied to a table cell with {{ cssxref("border-collapse") }} set to 
 ><code>collapsed</code>, this value behaves like <code>ridge</code
 >>.
180                </p>
181              </td>
182            </tr>
183          </tbody>
184        </table>
185      </dd>
186      <dt>
187        inherit
188      </dt>
189    </dl>
190    <p>
191      &nbsp; Represents the border style used by the parent of th
 >e current element.
192    </p>
193    <h2>
194      Examples
195    </h2>
196    <p>
197      {{ CSSRefExampleLink("border") }}
198    </p>
199    <pre>
200element {
201        border-left-size: 1px;
202        border-left-style: dotted;
203        border-left-color: #000;
204}
205</pre>
206    <h2 name="Specifications">
207      Specifications
208    </h2>
209    <table class="standard-table">
210      <thead>
211        <tr style="background-color: rgb(255, 204, 255);">
212          <th scope="col">
213            Specification
214          </th>
215          <th scope="col">
216            Status
217          </th>
218          <th scope="col">
219            Comment
220          </th>
221        </tr>
222      </thead>
223      <tbody>
224        <tr>
225          <td>
226            <a class="external" href="http://www.w3.org/TR/css3-b
 >ackground/#the-border-style" title="http://www.w3.org/TR/css3-bac
 >kground/#the-border-style">CSS Backgrounds and Borders Module Lev
 >el 3</a>
227          </td>
228          <td>
229            {{ Spec2('CSS3 Backgrounds') }}
230          </td>
231          <td>
232            No change
233          </td>
234        </tr>
235        <tr>
236          <td>
237            <a class="external" href="http://www.w3.org/TR/CSS21/
 >box.html#propdef-border-left-style" title="http://www.w3.org/TR/C
 >SS21/box.html#propdef-border-left-style">CSS 2.1</a>
238          </td>
239          <td>
240            {{ Spec2('CSS2.1') }}
241          </td>
242          <td>
243            &nbsp;
244          </td>
245        </tr>
246      </tbody>
247    </table>
248    <h2 name="Browser_Compatibility">
249      Browser Compatibility
250    </h2>
251    <p>
252      {{ CompatibilityTable() }}
253    </p>
254    <div id="compat-desktop">
255      <table class="compat-table">
256        <tbody>
257          <tr>
258            <th>
259              Feature
260            </th>
261            <th>
262              Chrome
263            </th>
264            <th>
265              Firefox (Gecko)
266            </th>
267            <th>
268              Internet Explorer
269            </th>
270            <th>
271              Opera
272            </th>
273            <th>
274              Safari
275            </th>
276          </tr>
277          <tr>
278            <td>
279              Basic support
280            </td>
281            <td>
282              1.0
283            </td>
284            <td>
285              1.0
286            </td>
287            <td>
288              5.5
289            </td>
290            <td>
291              9.2
292            </td>
293            <td>
294              1.0
295            </td>
296          </tr>
297        </tbody>
298      </table>
299    </div>
300    <div id="compat-mobile">
301      <table class="compat-table">
302        <tbody>
303          <tr>
304            <th>
305              Feature
306            </th>
307            <th>
308              Android
309            </th>
310            <th>
311              Firefox Mobile (Gecko)
312            </th>
313            <th>
314              IE&nbsp;Phone
315            </th>
316            <th>
317              Opera Mobile
318            </th>
319            <th>
320              Safari Mobile
321            </th>
322          </tr>
323          <tr>
324            <td>
325              Basic support
326            </td>
327            <td>
328              {{ CompatUnknown() }}
329            </td>
330            <td>
331              {{ CompatUnknown() }}
332            </td>
333            <td>
334              {{ CompatUnknown() }}
335            </td>
336            <td>
337              {{ CompatUnknown() }}
338            </td>
339            <td>
340              {{ CompatUnknown() }}
341            </td>
342          </tr>
343        </tbody>
344      </table>
345    </div>
346    <h2 name="See_Also">
347      See Also
348    </h2>
349    <ul>
350      <li>The other style-related border properties: {{ Cssxref("
 >border-bottom-style") }}, {{ Cssxref("border-right-style") }}, {{
 > Cssxref("border-top-style") }}, and {{ Cssxref("border-style") }
 >}.
351      </li>
352      <li>The other bottom-border-related properties: {{ Cssxref(
 >"border-left") }}, {{ Cssxref("border-left-color") }}, and {{ Css
 >xref("border-left-width") }}.
353      </li>
354    </ul>

Back to History