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
|
---
title: border
slug: Web/CSS/border
tags:
- CSS
- CSS Borders
- CSS Property
- Layout
- Reference
- 'recipe:css-shorthand-property'
translation_of: Web/CSS/border
---
<div>{{CSSRef("CSS Borders")}}</div>
<p><a href="/ko/docs/Web/CSS">CSS</a> <strong><code>border</code></strong> <a href="/ko/docs/Web/CSS/Shorthand_properties">단축 속성</a>은 요소의 테두리를 설정합니다. {{Cssxref("border-width")}}, {{Cssxref("border-style")}}, {{Cssxref("border-color")}}의 값을 설정합니다.</p>
<div>{{EmbedInteractiveExample("pages/css/border.html")}}</div>
<h2 id="구성_속성">구성 속성</h2>
<p><code>border</code>는 단축 속성으로서 다음의 하위 속성을 포함합니다.</p>
<ul>
<li>{{cssxref("border-color")}}</li>
<li>{{cssxref("border-style")}}</li>
<li>{{cssxref("border-width")}}</li>
</ul>
<h2 id="구문">구문</h2>
<pre class="brush: css no-line-numbers notranslate">/* 스타일 */
border: solid;
/* 너비 | 스타일 */
border: 2px dotted;
/* 스타일 | 색 */
border: outset #f33;
/* 너비 | 스타일 | 색 */
border: medium dashed green;
/* 전역 값 */
border: inherit;
border: initial;
border: unset;
</pre>
<p><code>border</code> 속성은 다음의 값 중 한 개에서 세 개를 선택해서 지정할 수 있습니다. 순서는 영향을 주지 않습니다.</p>
<div class="note">
<p><strong>참고:</strong> 스타일을 지정하지 않으면 기본값인 <code>none</code>이 사용돼 테두리가 보이지 않습니다.</p>
</div>
<h3 id="Values" name="Values">값</h3>
<dl>
<dt id="<line-width>"><code><line-width></code></dt>
<dd>테두리의 굵기로 기본값은 <code>medium</code>입니다. {{Cssxref("border-width")}}를 참고하세요.</dd>
<dt id="<line-style>"><code><line-style></code></dt>
<dd>테두리의 스타일로 기본값은 <code>none</code>입니다. {{Cssxref("border-style")}}을 참고하세요.</dd>
<dt id="<color>">{{cssxref("<color>")}}</dt>
<dd>테두리의 색상으로 기본값은 <code>currentcolor</code>입니다. {{Cssxref("border-color")}}를 참고하세요.</dd>
</dl>
<h2 id="설명">설명</h2>
<p>다른 단축 속성과 마찬가지로, 생략한 속성은 <a href="/ko/docs/Web/CSS/initial_value">초깃값</a>으로 설정됩니다. 한 가지 중요한 점은, <code>border</code>를 사용해서는 {{cssxref("border-image")}}에 원하는 값을 지정할 수는 없고 대신 초깃값인 <code>none</code>이 자동으로 설정됩니다.</p>
<p><code>border</code> 단축 속성은 요소의 테두리를 모두 동일하게 설정하고 싶을 때 특히 유용합니다. 그러나 서로의 테두리를 다르게 하고 싶다면 네 면을 각각 설정할 수 있는 본디 속성 {{Cssxref("border-width")}}, {{Cssxref("border-style")}},{{Cssxref("border-color")}}를 사용하면 됩니다. 아니면 한 면의 테두리를 절대 기준({{Cssxref("border-top")}} 등)이나 상대 기준({{Cssxref("border-block-start")}} 등) 속성을 사용해서 따로 정해줄 수도 있습니다.</p>
<h3 id="테두리_vs외곽선">테두리 vs외곽선</h3>
<p>테두리와 <a href="/ko/docs/Web/CSS/outline">외곽선</a>은 매우 유사하지만, 다음의 두 가지 차이점이 존재합니다.</p>
<ul>
<li>외곽선은 요소 콘텐츠의 밖에 그려지며 절대 공간을 차지하지 않습니다.</li>
<li>명세에 따르면 외곽선은 직사각형일 필요가 없습니다. 보통 직사각형으로 그리기는 합니다.</li>
</ul>
<h2 id="형식_정의">형식 정의</h2>
<p>{{cssinfo}}</p>
<h2 id="형식_구문">형식 구문</h2>
<pre class="syntaxbox notranslate"><code>{{csssyntax}}</code></pre>
<h2 id="예제">예제</h2>
<h3 id="튀어나오는_듯한_분홍색_테두리_추가하기">튀어나오는 듯한 분홍색 테두리 추가하기</h3>
<h4 id="HTML">HTML</h4>
<pre class="brush: html notranslate"><div>테두리와 외곽선에 더해 그림자까지, 정말 멋지지 않나요?</div>
</pre>
<h4 id="CSS">CSS</h4>
<pre class="brush: css notranslate">div {
border: 0.5rem outset pink;
outline: 0.5rem solid khaki;
box-shadow: 0 0 0 2rem skyblue;
border-radius: 12px;
font: bold 1rem sans-serif;
margin: 2rem;
padding: 1rem;
outline-offset: 0.5rem;
}</pre>
<h4 id="결과">결과</h4>
<p>{{EmbedLiveSample('튀어나오는_듯한_분홍색_테두리_추가하기')}}</p>
<h2 id="Specifications" name="Specifications">명세</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', '#the-border-shorthands', 'border')}}</td>
<td>{{Spec2('CSS3 Backgrounds')}}</td>
<td>Removes <em>specific</em> support for <code>transparent</code>, as it is now a valid {{cssxref("<color>")}}; this has no practical impact.<br>
Though it cannot be set to a custom value using the shorthand, <code>border</code> now resets {{cssxref("border-image")}} to its initial value (<code>none</code>).</td>
</tr>
<tr>
<td>{{SpecName('CSS2.1', 'box.html#border-shorthand-properties', 'border')}}</td>
<td>{{Spec2('CSS2.1')}}</td>
<td>Accepts the <code>inherit</code> keyword. Also accepts <code>transparent</code> as a valid color.</td>
</tr>
<tr>
<td>{{SpecName('CSS1', '#border', 'border')}}</td>
<td>{{Spec2('CSS1')}}</td>
<td>Initial definition.</td>
</tr>
</tbody>
</table>
<h2 id="Browser_compatibility" name="Browser_compatibility">브라우저 호환성</h2>
<p>{{Compat("css.properties.border")}}</p>
|
