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
|
---
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">border-bottom-style: dotted;
border-bottom: thick green;
</pre>
<p>... это то же самое, что ...</p>
<pre class="brush: css">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">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"><div>
This box has a border on the bottom side.
</div></pre>
<h4 id="CSS">CSS</h4>
<pre class="brush: css">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>
<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>
|
