1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
|
---
title: border-left-style
slug: Web/CSS/border-left-style
translation_of: Web/CSS/border-left-style
---
<div>{{CSSRef}}</div>
<p>The <strong><code>border-left-style</code></strong> <a href="/en-US/docs/CSS" title="CSS">CSS</a> property sets the line style of an element's left {{cssxref("border")}}.</p>
<div>{{EmbedInteractiveExample("pages/css/border-left-style.html")}}</div>
<div class="note"><strong>Note:</strong> The specification doesn't define how borders of different styles connect in the corners.</div>
<h2 id="Syntax" name="Syntax">Syntax</h2>
<pre class="brush:css no-line-numbers">/* Keyword values */
border-left-style: none;
border-left-style: hidden;
border-left-style: dotted;
border-left-style: dashed;
border-left-style: solid;
border-left-style: double;
border-left-style: groove;
border-left-style: ridge;
border-left-style: inset;
border-left-style: outset;
/* Global values */
border-left-style: inherit;
border-left-style: initial;
border-left-style: unset;
</pre>
<p>The <code>border-left-style</code> property is specified as a single keyword chosen from those available for the {{cssxref("border-style")}} property.</p>
<h3 id="Formal_syntax">Formal syntax</h3>
<pre class="syntaxbox">{{csssyntax}}</pre>
<h2 id="Examples" name="Examples">Examples</h2>
<h4 id="HTML">HTML</h4>
<pre class="brush: html"><table>
<tr>
<td class="b1">none</td>
<td class="b2">hidden</td>
<td class="b3">dotted</td>
<td class="b4">dashed</td>
</tr>
<tr>
<td class="b5">solid</td>
<td class="b6">double</td>
<td class="b7">groove</td>
<td class="b8">ridge</td>
</tr>
<tr>
<td class="b9">inset</td>
<td class="b10">outset</td>
</tr>
</table></pre>
<h4 id="CSS">CSS</h4>
<pre class="brush: css">/* Define look of the table */
table {
border-width: 2px;
background-color: #52E385;
}
tr, td {
padding: 3px;
}
/* border-left-style example classes */
.b1 {border-left-style: none;}
.b2 {border-left-style: hidden;}
.b3 {border-left-style: dotted;}
.b4 {border-left-style: dashed;}
.b5 {border-left-style: solid;}
.b6 {border-left-style: double;}
.b7 {border-left-style: groove;}
.b8 {border-left-style: ridge;}
.b9 {border-left-style: inset;}
.b10 {border-left-style: outset;}</pre>
<p>Result</p>
<p>{{ EmbedLiveSample('Examples', 300, 200) }}</p>
<h2 id="Specifications" name="Specifications">Specifications</h2>
<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', '#the-border-style', 'border-left-style')}}</td>
<td>{{Spec2('CSS3 Backgrounds')}}</td>
<td>No significant change.</td>
</tr>
<tr>
<td>{{SpecName('CSS2.1', 'box.html#border-style-properties', 'border-left-style')}}</td>
<td>{{Spec2('CSS2.1')}}</td>
<td>Initial definition.</td>
</tr>
</tbody>
</table>
<p>{{cssinfo}}</p>
<h2 id="Browser_compatibility" name="Browser_compatibility">Browser compatibility</h2>
<p>{{Compat("css.properties.border-left-style")}}</p>
<h2 id="See_also" name="See_also">See also</h2>
<ul>
<li>The other style-related border properties: {{Cssxref("border-bottom-style")}}, {{Cssxref("border-right-style")}}, {{Cssxref("border-top-style")}}, and {{Cssxref("border-style")}}.</li>
<li>The other left-border-related properties: {{Cssxref("border-left")}}, {{Cssxref("border-left-color")}}, and {{Cssxref("border-left-width")}}.</li>
</ul>
|
