blob: de1dc86b8c0e3d825cf8e44efb14b9873d2b49d7 (
plain)
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
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
|
---
title: border-style
slug: Web/CSS/border-style
tags:
- CSS
- CSS 境界
- CSS プロパティ
- リファレンス
- recipe:css-shorthand-property
browser-compat: css.properties.border-style
translation_of: Web/CSS/border-style
---
{{CSSRef}}
**`border-style`** は [一括指定](/ja/docs/Web/CSS/Shorthand_properties) の [CSS](/ja/docs/Web/CSS) プロパティで、要素の境界線の 4 辺すべての線のスタイルを設定します。
{{EmbedInteractiveExample("pages/css/border-style.html")}}
## 構成要素のプロパティ
このプロパティは以下の CSS プロパティの一括指定です。
- [`border-bottom-style`](/ja/docs/Web/CSS/border-bottom-style)
- [`border-left-style`](/ja/docs/Web/CSS/border-left-style)
- [`border-right-style`](/ja/docs/Web/CSS/border-right-style)
- [`border-top-style`](/ja/docs/Web/CSS/border-top-style)
## 構文
```css
/* キーワード値 */
border-style: none;
border-style: hidden;
border-style: dotted;
border-style: dashed;
border-style: solid;
border-style: double;
border-style: groove;
border-style: ridge;
border-style: inset;
border-style: outset;
/* 上下 | 左右 */
border-style: dotted solid;
/* 上 | 左右 | 下 */
border-style: hidden double dashed;
/* 上 | 右 | 下 | 左 */
border-style: none solid dotted dashed;
/* グローバル値 */
border-style: inherit;
border-style: initial;
border-style: revert;
border-style: unset;
```
`border-style` プロパティは 1 つ、 2 つ、 3 つ、 4 つの値を使って指定することができます。
- 値が **1 つ**指定された場合、**全 4 辺**に同じスタイルが適用される。
- 値が **2 つ**指定された場合、1 つ目のスタイルは**上下**、2 つ目は**左右**の辺に適用される。
- 値が **3 つ**指定された場合、1 つ目のスタイルは**上**、2 つ目は**左右**、3 つ目は**下**の辺に適用される。
- 値が **4 つ**指定された場合、スタイルはそれぞれ**上**、**右**、**下**、**左**の順（時計回り）に適用される。
それぞれの値は以下の一覧にあるキーワードです。
### 値
- `<line-style>`
- : 境界のスタイルを記述します。以下の値を使用することができます。
- `none`
- : `hidden` キーワードと同様に、境界線を表示しません。 {{cssxref("background-image")}} を設定している場合を除き、プロパティで別に指定していても {{cssxref("border-width")}} の同じ辺の計算値は `0` になります。テーブルのセルで境界線が collasped 形式である場合は、 `none` 値はもっとも低い優先度になります。ほかに競合する境界線が設定されている場合も、そちらが表示されます。
- `hidden`
- : `none` キーワードと同様に、境界線を表示しません。 {{cssxref("background-image")}} を設定している場合を除き、プロパティで別に指定していても {{cssxref("border-width")}} の同じ辺の計算値は `0` になります。テーブルのセルで境界線が collasped 形式である場合は、 `hidden` 値はもっとも高い優先度になります。ほかに競合する境界線が設定されている場合も、非表示になります。
- `dotted`
- : 連続した丸い点を表示します。点の間の空白の量は仕様書で定義されておらず、実装依存です。点の半径は、同じ辺の {{cssxref("border-width")}} の計算値の半分です。
- `dashed`
- : 短く角が四角い連続したダッシュや線分を表示します。線分の実寸や長さは仕様書で定義されておらず、実装依存です。
- `solid`
- : 1 本の直線、実線を表示します。
- `double`
- : 2 本の直線を表示し、幅の合計は {{cssxref("border-width")}} で定義したピクセル数になります。
- `groove`
- : 凹んだように見える境界線を表示します。 `ridge` の逆です。
- `ridge`
- : 出っ張ったように見える境界線を表示します。 `groove` の逆です。
- `inset`
- : 要素が埋め込まれて見える境界線を表示します。 `outset` の逆です。 {{cssxref("border-collapse")}} が `collapsed` に設定されたテーブルのセルに適用すると、この値は `groove` のようにふるまいます。
- `outset`
- : 要素が出っ張って見える境界線を表示します。 `inset` の逆です。 {{cssxref("border-collapse")}} を `collapsed` に設定したテーブルセルに適用すると、この値は `ridge` のようにふるまいます。
## 公式定義
{{cssinfo}}
## 形式文法
{{csssyntax}}
## 例
<h3 id="All_property_values">プロパティのすべての値</h3>
プロパティのすべての値のサンプルです。
#### HTML
```html
<pre class="b1">none</pre>
<pre class="b2">hidden</pre>
<pre class="b3">dotted</pre>
<pre class="b4">dashed</pre>
<pre class="b5">solid</pre>
<pre class="b6">double</pre>
<pre class="b7">groove</pre>
<pre class="b8">ridge</pre>
<pre class="b9">inset</pre>
<pre class="b10">outset</pre>
```
#### CSS
```css
pre {
height: 80px;
width: 120px;
margin: 20px;
padding: 20px;
display: inline-block;
background-color: palegreen;
border-width: 5px;
box-sizing: border-box;
}
/* border-style の例示用クラス */
.b1 {
border-style: none;
}
.b2 {
border-style: hidden;
}
.b3 {
border-style: dotted;
}
.b4 {
border-style: dashed;
}
.b5 {
border-style: solid;
}
.b6 {
border-style: double;
}
.b7 {
border-style: groove;
}
.b8 {
border-style: ridge;
}
.b9 {
border-style: inset;
}
.b10 {
border-style: outset;
}
```
### 結果
{{EmbedLiveSample('All_property_values', "1200", 450)}}
## 仕様書
{{Specifications}}
## ブラウザーの互換性
{{Compat}}
## 関連情報
- 境界に関する CSS 一括指定プロパティ: {{Cssxref("border")}}, {{Cssxref("border-width")}}, {{Cssxref("border-color")}}, {{Cssxref("border-radius")}}
|
