-
Notifications
You must be signed in to change notification settings - Fork 8k
/
index.md
97 lines (66 loc) · 2.17 KB
/
index.md
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
---
title: border-left-width
slug: Web/CSS/border-left-width
l10n:
sourceCommit: 42c1bb8c259f3f57de9f38600776cf273e3addda
---
{{CSSRef}}
**`border-left-width`** は [CSS](/ja/docs/Web/CSS) のプロパティで、要素の左側の境界の幅を設定します。
{{EmbedInteractiveExample("pages/css/border-left-width.html")}}
## 構文
```css
/* キーワード値 */
border-left-width: thin;
border-left-width: medium;
border-left-width: thick;
/* <length> 値 */
border-left-width: 10em;
border-left-width: 3vmax;
border-left-width: 6px;
/* グローバル値 */
border-left-width: inherit;
border-left-width: initial;
border-left-width: revert;
border-left-width: revert-layer;
border-left-width: unset;
```
### 値
- `<line-width>`
- : 境界の幅を、明示的な非負の {{cssxref("<length>")}} またはキーワードで定義します。キーワードの場合、以下の値のいずれかでなければなりません。
- `thin`
- `medium`
- `thick`
> **メモ:** 仕様書ではそれぞれのキーワードで示される正確な太さを定義していないため、いずれかを使用した場合の詳細な結果は、実装に依存します。とは言っても、常に `thin ≤ medium ≤ thick` というパターンに従い、値は同じ文書の中では一貫しています。
## 公式定義
{{CSSInfo}}
## 形式文法
{{csssyntax}}
## 例
### 境界線の太さの比較
#### HTML
```html
<div>Element 1</div>
<div>Element 2</div>
```
#### CSS
```css
div {
border: 1px solid red;
margin: 1em 0;
}
div:nth-child(1) {
border-left-width: thick;
}
div:nth-child(2) {
border-left-width: 2em;
}
```
#### 結果
{{EmbedLiveSample('境界線の太さの比較', '100%')}}
## 仕様書
{{Specifications}}
## ブラウザーの互換性
{{Compat}}
## 関連情報
- 境界の太さに関する他の CSS プロパティ: {{Cssxref("border-top-width")}}, {{Cssxref("border-right-width")}}, {{Cssxref("border-bottom-width")}}, {{Cssxref("border-width")}}
- 左の境界に関する他の CSS プロパティ: {{Cssxref("border")}}, {{Cssxref("border-left")}}, {{Cssxref("border-left-style")}}, {{Cssxref("border-left-color")}}