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
|
---
title: border
slug: Web/CSS/border
tags:
- CSS
- CSS Borders
- CSS Property
- Layout
- Reference
translation_of: Web/CSS/border
---
<div>{{CSSRef("CSS Borders")}}</div>
<p><span class="seoSummary"><strong><code>border</code></strong> <a href="/en-US/docs/Web/CSS/Shorthand_properties">shorthand</a> <a href="/en-US/docs/CSS">CSS</a> 屬性可用來設定元素的邊框。</span>它可以設定以下的值 {{Cssxref("border-width")}}、{{Cssxref("border-style")}} 以及 {{Cssxref("border-color")}}。</p>
<div>{{EmbedInteractiveExample("pages/css/border.html")}}</div>
<p>As with all shorthand properties, any omitted sub-values will be set to their <a href="/en-US/docs/Web/CSS/initial_value">initial value</a>. Importantly, <code>border</code> cannot be used to specify a custom value for {{cssxref("border-image")}}, but instead sets it to its initial value, i.e., <code>none</code>.</p>
<p>The <code>border</code> shorthand is especially useful when you want all four borders to be the same. To make them different from each other, however, you can use the longhand {{Cssxref("border-width")}}, {{Cssxref("border-style")}}, and {{Cssxref("border-color")}} properties, which accept different values for each side. Alternatively, you can target one border at a time with the physical (e.g., {{Cssxref("border-top")}} ) and logical (e.g., {{Cssxref("border-block-start")}}) border properties.</p>
<h3 id="Borders_vs._outlines">Borders vs. outlines</h3>
<p>Borders and <a href="/en-US/docs/Web/CSS/outline">outlines</a> are very similar. However, outlines differ from borders in the following ways:</p>
<ul>
<li>Outlines never take up space, as they are drawn outside of an element's content.</li>
<li>According to the spec, outlines don't have to be rectangular, although they usually are.</li>
</ul>
<h2 id="Syntax" name="Syntax">Syntax</h2>
<pre class="brush: css no-line-numbers">/* style */
border: solid;
/* width | style */
border: 2px dotted;
/* style | color */
border: outset #f33;
/* width | style | color */
border: medium dashed green;
/* Global values */
border: inherit;
border: initial;
border: unset;
</pre>
<p>The <code>border</code> property may be specified using one, two, or three of the values listed below. The order of the values does not matter.</p>
<div class="note">
<p><strong>Note:</strong> The border will be invisible if its style is not defined. This is because the style defaults to <code>none</code>.</p>
</div>
<h3 id="Values" name="Values">Values</h3>
<dl>
<dt id="<line-width>"><code><line-width></code></dt>
<dd>Sets the thickness of the border. Defaults to <code>medium</code> if absent. See {{Cssxref("border-width")}}.</dd>
<dt id="<line-style>"><code><line-style></code></dt>
<dd>Sets the style of the border. Defaults to <code>none</code> if absent. See {{Cssxref("border-style")}}.</dd>
<dt id="<color>">{{cssxref("<color>")}}</dt>
<dd>Sets the color of the border. Defaults to <code>currentcolor</code> if absent. See {{Cssxref("border-color")}}.</dd>
</dl>
<h3 id="Formal_syntax">Formal syntax</h3>
<pre class="syntaxbox"><code>{{csssyntax}}</code></pre>
<h2 id="Example">Example</h2>
<h3 id="HTML">HTML</h3>
<pre class="brush: html"><div>I have a border, an outline, AND a box shadow! Amazing, isn't it?</div>
</pre>
<h3 id="CSS">CSS</h3>
<pre class="brush: css">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>
<h3 id="Result">Result</h3>
<p>{{EmbedLiveSample('Example')}}</p>
<h2 id="Specifications" name="Specifications">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>
<p>{{cssinfo}}</p>
<h2 id="Browser_compatibility" name="Browser_compatibility">Browser compatibility</h2>
<p>{{Compat("css.properties.border")}}</p>
|
