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
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
|
---
title: border-style
slug: Web/CSS/border-style
tags:
- CSS
- CSS Borders
- CSS Property
- Reference
translation_of: Web/CSS/border-style
---
<div>{{CSSRef}}</div>
<p><strong><code>border-style</code> </strong><a href="/ko/docs/Web/CSS">CSS</a> <a href="/ko/docs/Web/CSS/Shorthand_properties">단축 속성</a>은 요소 테두리 네 면의 스타일을 지정합니다.</p>
<div>{{EmbedInteractiveExample("pages/css/border-style.html")}}</div>
<h2 id="구문">구문</h2>
<pre class="brush: css no-line-numbers">/* 키워드 값 */
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: unset;
</pre>
<p><code>border-style</code> 속성은 한 개에서 네 개의 값을 사용해 지정할 수 있습니다.</p>
<ul>
<li><strong>한 개의 값</strong>은 모든 네 면의 테두리 스타일을 설정합니다.</li>
<li><strong>두 개의 값</strong>을 지정하면 첫 번째는 <strong>위와 아래</strong>, 두 번째는 <strong>왼쪽과 오른쪽</strong> 테두리 스타일을 설정합니다.</li>
<li><strong>세 개의 값</strong>을 지정하면 첫 번째는 <strong>위</strong>, 두 번째는 <strong>왼쪽과 오른쪽,</strong> 세 번째 값은 <strong>아래</strong> 테두리 스타일을 설정합니다.</li>
<li><strong>네 개의 값</strong>을 지정하면 각각 <strong>상, 우, 하, 좌</strong> 순서로 테두리 스타일을 지정합니다. (시계방향)</li>
</ul>
<p>각각의 값은 아래 목록 중 하나로 지정합니다.</p>
<h3 id="값">값</h3>
<dl>
<dt><code><line-style></code></dt>
<dd>테두리의 스타일을 설명합니다. 다음 표의 값을 사용할 수 있습니다.
<table class="standard-table">
<tbody>
<tr>
<td style="vertical-align: middle;"><code>none</code></td>
<td style="vertical-align: middle;">
<div style="margin: 0.5em; width: 3em; height: 3em; border-style: none; background-color: palegreen;"> </div>
</td>
<td style="vertical-align: middle;"><code>hidden</code> 키워드와 마찬가지로 테두리를 표시하지 않습니다. {{cssxref("background-image")}}를 지정하지 않았으면 해당 면의 {{cssxref("border-width")}} 계산값은 지정값을 무시하고 <code>0</code>이 됩니다. 표에서, 칸의 테두리 상쇄 시 <code>none</code>은 제일 낮은 우선순위를 가집니다. 따라서 주변 칸이 테두리를 가진다면 테두리를 그립니다.</td>
</tr>
<tr>
<td style="vertical-align: middle;"><code>hidden</code></td>
<td style="vertical-align: middle;">
<div style="margin: 0.5em; width: 3em; height: 3em; border-width: 3px; border-style: hidden; background-color: palegreen;"> </div>
</td>
<td style="vertical-align: middle;"><code>none</code> 키워드와 마찬가지로 테두리를 표시하지 않습니다. Unless a {{cssxref("background-image")}}를 지정하지 않았으면 해당 면의 {{cssxref("border-width")}} 계산값은 지정값을 무시하고 <code>0</code>이 됩니다. 표에서, 칸의 테두리 상쇄 시 <code>hidden</code>은 제일 높은 우선순위를 가집니다. 따라서 주변 칸이 테두리를 가지더라도 그리지 않습니다.</td>
</tr>
<tr>
<td style="vertical-align: middle;"><code>dotted</code></td>
<td style="vertical-align: middle;">
<div style="margin: 0.5em; width: 3em; height: 3em; border-width: 3px; border-style: dotted; background-color: palegreen;"> </div>
</td>
<td style="vertical-align: middle;">테두리를 둥근 점 여러개로 그립니다. 점 간격은 명세에서 지정하지 않으며 구현마다 다릅니다. 점의 반지름은 해당 면 {{cssxref("border-width")}}의 절반입니다.</td>
</tr>
<tr>
<td style="vertical-align: middle;"><code>dashed</code></td>
<td style="vertical-align: middle;">
<div style="margin: 0.5em; width: 3em; height: 3em; border-width: 3px; border-style: dashed; background-color: palegreen;"> </div>
</td>
<td style="vertical-align: middle;">테두리를 직사각형 여러개로 그립니다. 사각형의 크기와 길이는 명세에서 지정하지 않으며 구현마다 다릅니다.</td>
</tr>
<tr>
<td style="vertical-align: middle;"><code>solid</code></td>
<td style="vertical-align: middle;">
<div style="margin: 0.5em; width: 3em; height: 3em; border-width: 3px; border-style: solid; background-color: palegreen;"> </div>
</td>
<td style="vertical-align: middle;">테두리를 하나의 직선으로 그립니다.</td>
</tr>
<tr>
<td style="vertical-align: middle;"><code>double</code></td>
<td style="vertical-align: middle;">
<div style="margin: 0.5em; width: 3em; height: 3em; border-width: 3px; border-style: double; background-color: palegreen;"> </div>
</td>
<td style="vertical-align: middle;">테두리를 두 개의 평행한 직선으로 그립니다.</td>
</tr>
<tr>
<td style="vertical-align: middle;"><code>groove</code></td>
<td style="vertical-align: middle;">
<div style="margin: 0.5em; width: 3em; height: 3em; border-width: 3px; border-style: groove; background-color: palegreen;"> </div>
</td>
<td style="vertical-align: middle;">테두리가 파인 것처럼 그립니다.<code>ridge</code>의 반대입니다.</td>
</tr>
<tr>
<td style="vertical-align: middle;"><code>ridge</code></td>
<td style="vertical-align: middle;">
<div style="margin: 0.5em; width: 3em; height: 3em; border-width: 3px; border-style: ridge; background-color: palegreen;"> </div>
</td>
<td style="vertical-align: middle;">테두리가 튀어나온 것처럼 그립니다. <code>groove</code>의 반대입니다.</td>
</tr>
<tr>
<td style="vertical-align: middle;"><code>inset</code></td>
<td style="vertical-align: middle;">
<div style="margin: 0.5em; width: 3em; height: 3em; border-width: 3px; border-style: inset; background-color: palegreen;"> </div>
</td>
<td style="vertical-align: middle;">요소가 파인 것처럼 테두리를 그립니다.<code>outset</code>의 반대입니다. {{cssxref("border-collapse")}}가 <code>collapsed</code>인 칸에서는 <code>groove</code>와 동일합니다.</td>
</tr>
<tr>
<td style="vertical-align: middle;"><code>outset</code></td>
<td style="vertical-align: middle;">
<div style="margin: 0.5em; width: 3em; height: 3em; border-width: 3px; border-style: outset; background-color: palegreen;"> </div>
</td>
<td style="vertical-align: middle;">
<p>요소가 튀어나온 것처럼 그립니다. <code>inset</code>의 반대입니다. {{cssxref("border-collapse")}}가 <code>collapsed</code>인 칸에서는 <code>ridge</code>와 동일합니다.</p>
</td>
</tr>
</tbody>
</table>
</dd>
</dl>
<h3 id="형식_구문">형식 구문</h3>
<pre class="syntaxbox">{{csssyntax}}
</pre>
<h2 id="예제">예제</h2>
<h3 id="속성_값의_예시_표">속성 값의 예시 표</h3>
<p>가능한 모든 값을 나열한 표입니다.</p>
<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">/* 테이블 스타일 */
table {
border-width: 3px;
background-color: #52E396;
}
tr, td {
padding: 2px;
}
/* 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;}</pre>
<h4 id="결과">결과</h4>
<p>{{EmbedLiveSample('속성_값의_예시_표', 300, 200)}}</p>
<h2 id="명세">명세</h2>
<table class="standard-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', '#border-style', 'border-style')}}</td>
<td>{{Spec2('CSS3 Backgrounds')}}</td>
<td>No change.</td>
</tr>
<tr>
<td>{{SpecName('CSS2.1', 'box.html#propdef-border-style', 'border-style')}}</td>
<td>{{Spec2('CSS2.1')}}</td>
<td>Adds <code>hidden</code> keyword value.</td>
</tr>
<tr>
<td>{{SpecName('CSS1', '#border-style', 'border-style')}}</td>
<td>{{Spec2('CSS1')}}</td>
<td>Initial definition.</td>
</tr>
</tbody>
</table>
<h2 id="브라우저_호환성">브라우저 호환성</h2>
<p>{{Compat("css.properties.border-style")}}</p>
<h2 id="같이_보기">같이 보기</h2>
<ul>
<li>테두리 관련 CSS 단축 속성: {{Cssxref("border")}}, {{Cssxref("border-width")}}, {{Cssxref("border-color")}}, {{Cssxref("border-radius")}}</li>
</ul>
|
