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
|
---
title: border-bottom
slug: Web/CSS/border-bottom
translation_of: Web/CSS/border-bottom
---
<div>{{CSSRef}}</div>
<p><span class="seoSummary"><a href="/en-US/docs/Web/CSS/Shorthand_properties">Сокращённое свойство </a> <a href="/en-US/docs/Web/CSS">CSS</a> <strong><code>border-bottom </code></strong>описывает нижнюю границу элемента <a href="/en-US/docs/Web/CSS/border">border</a>.</span> Оно устанавливает значения {{cssxref("border-bottom-width")}}, {{cssxref("border-bottom-style")}} и {{cssxref("border-bottom-color")}}.</p>
<div>{{EmbedInteractiveExample("pages/css/border-bottom.html")}}</div>
<p>Как и все сокращённые свойства, <code>border-bottom</code> устанавливает значения всех свойств, которые он может установить, даже если они не указаны. Для тех свойств, которые не указаны оно устанавливает значения по умолчанию. Это означает, что ...</p>
<pre class="brush: css notranslate">border-bottom-style: dotted;
border-bottom: thick green;
</pre>
<p>... это то же самое, что ...</p>
<pre class="brush: css notranslate">border-bottom-style: dotted;
border-bottom: none thick green;
</pre>
<p>... и значение {{cssxref("border-bottom-style")}}, указанное перед <code>border-bottom</code> игнорируется. Поскольку значением по умолчанию для {{cssxref("border-bottom-style")}} является <code>none</code>, то без указания <code>border-style</code> граница не будет показана.</p>
<h2 id="Constituent_properties">Constituent properties</h2>
<p>This property is a shorthand for the following CSS properties:</p>
<ul>
<li><a href="/en-US/docs/Web/CSS/border-bottom-color"><code>border-bottom-color</code></a></li>
<li><a href="/en-US/docs/Web/CSS/border-bottom-style"><code>border-bottom-style</code></a></li>
<li><a href="/en-US/docs/Web/CSS/border-bottom-width"><code>border-bottom-width</code></a></li>
</ul>
<h2 id="Syntax">Syntax</h2>
<pre class="brush: css no-line-numbers notranslate">border-bottom: 1px;
border-bottom: 2px dotted;
border-bottom: medium dashed blue;
</pre>
<p>The three values of the shorthand property can be specified in any order, and one or two of them may be omitted.</p>
<h3 id="Values">Values</h3>
<dl>
<dt><code><br-width></code></dt>
<dd>See {{cssxref("border-bottom-width")}}.</dd>
<dt><code><br-style></code></dt>
<dd>See {{cssxref("border-bottom-style")}}.</dd>
<dt>{{cssxref("<color>")}}</dt>
<dd>See {{cssxref("border-bottom-color")}}.</dd>
</dl>
<h2 id="Formal_definition">Formal definition</h2>
<p>{{CSSInfo}}</p>
<h2 id="Formal_syntax">Formal syntax</h2>
{{csssyntax}}
<h2 id="Examples">Examples</h2>
<h3 id="Applying_a_bottom_border">Applying a bottom border</h3>
<h4 id="HTML">HTML</h4>
<pre class="brush: html notranslate"><div>
This box has a border on the bottom side.
</div></pre>
<h4 id="CSS">CSS</h4>
<pre class="brush: css notranslate">div {
border-bottom: 4px dashed blue;
background-color: gold;
height: 100px;
width: 100px;
font-weight: bold;
text-align: center;
}
</pre>
<h4 id="Results">Results</h4>
<p>{{EmbedLiveSample('Applying_a_bottom_border')}}</p>
<h2 id="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', '#propdef-border-bottom', 'border-bottom')}}</td>
<td>{{Spec2('CSS3 Backgrounds')}}</td>
<td>No direct changes, though the modification of values for the {{cssxref("border-bottom-color")}} do apply to it.</td>
</tr>
<tr>
<td>{{SpecName('CSS2.1', 'box.html#propdef-border-bottom', 'border-bottom')}}</td>
<td>{{Spec2('CSS2.1')}}</td>
<td>No significant changes.</td>
</tr>
<tr>
<td>{{SpecName('CSS1', '#border-bottom', 'border-bottom')}}</td>
<td>{{Spec2('CSS1')}}</td>
<td>Initial definition</td>
</tr>
</tbody>
</table>
<h2 id="Browser_compatibility">Browser compatibility</h2>
<div class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</div>
<p>{{Compat("css.properties.border-bottom")}}</p>
<h2 id="See_also">See also</h2>
<ul>
<li><code><a href="/en-US/docs/Web/CSS/border">border</a></code></li>
<li><code><a href="/en-US/docs/Web/CSS/border-block">border-block</a></code></li>
<li><code><a href="/en-US/docs/Web/CSS/outline">outline</a></code></li>
</ul>
|
