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
|
---
title: border-bottom-width
slug: Web/CSS/border-bottom-width
tags:
- CSS
- Propriété
- Reference
translation_of: Web/CSS/border-bottom-width
---
<div>{{CSSRef}}</div>
<p>La propriété <strong><code>border-bottom-width</code></strong> définit l'épaisseur de la bordure pour le côté bas d'un élément.</p>
<div>{{EmbedInteractiveExample("pages/css/border-bottom-width.html")}}</div>
<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
<h2 id="Syntaxe">Syntaxe</h2>
<pre class="brush:css no-line-numbers">/* Une valeur de longueur */
/* Type <length> */
border-bottom-width: 10em;
border-bottom-width: 3vmax;
border-bottom-width: 6px;
/* Valeurs avec un mot-clé */
border-bottom-width: thin;
border-bottom-width: medium;
border-bottom-width: thick;
/* Valeurs globales */
border-bottom-width: inherit;
border-bottom-width: initial;
border-bottom-width: unset;
</pre>
<h3 id="Valeurs">Valeurs</h3>
<dl>
<dt><code><line-width></code></dt>
<dd>Une valeur de longueur ({{cssxref("<length>")}}) positive ou un mot-clé qui indique l'épaisseur de la bordure pour le bas de la boîte. Si la valeur est un mot-clé, ce doit être l'une des valeurs suivantes :
<table class="standard-table">
<tbody>
<tr>
<td><code>thin</code></td>
<td>
<div style="margin: 0.5em; width: 3em; height: 3em; border-bottom-style: solid; border-bottom-width: thin; background-color: palegreen;"> </div>
</td>
<td>Une bordure fine.</td>
</tr>
<tr>
<td><code>medium</code></td>
<td>
<div style="margin: 0.5em; width: 3em; height: 3em; border-bottom-style: solid; border-bottom-width: medium; background-color: palegreen;"> </div>
</td>
<td>Une bordure moyenne.</td>
</tr>
<tr>
<td><code>thick</code></td>
<td>
<div style="margin: 0.5em; width: 3em; height: 3em; border-bottom-style: solid; border-bottom-width: thick; background-color: palegreen;"> </div>
</td>
<td>Une bordure épaisse.</td>
</tr>
</tbody>
</table>
La spécification ne précise pas de façon exacte l'épaisseur correspondant à chacun de ces mots-clés (c'est donc à chaque implémentation de choisir). La spécification requiert toutefois que l'inégalité suivante soit respectée <code>thin ≤ medium ≤ thick</code> et que ces valeurs soient constantes pour un même document<code>.</code></dd>
</dl>
<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
<pre class="syntaxbox">{{csssyntax}}</pre>
<h2 id="Exemples">Exemples</h2>
<h3 id="CSS">CSS</h3>
<pre class="brush: css">.element1{
border-bottom: thick solid red;
}
.element2{
border-bottom: medium solid orange;
}
.element3{
border-bottom: thin solid green;
}
</pre>
<h3 id="HTML">HTML</h3>
<pre class="brush: html"><p class="element1">
Une bordure épaisse rouge.
</p>
<p class="element2">
Une bordure moyenne orange.
</p>
<p class="element3">
Et une bordure fine verte.
</p></pre>
<h3 id="Résultat">Résultat</h3>
<p>{{EmbedLiveSample("Exemples","200","300")}}</p>
<h2 id="Spécifications">Spécifications</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Spécification</th>
<th scope="col">État</th>
<th scope="col">Commentaires</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('CSS3 Backgrounds', '#the-border-width', 'border-bottom-width')}}</td>
<td>{{Spec2('CSS3 Backgrounds')}}</td>
<td>Pas de modification significative.</td>
</tr>
<tr>
<td>{{SpecName('CSS2.1', 'box.html#border-width-properties', 'border-bottom-width')}}</td>
<td>{{Spec2('CSS2.1')}}</td>
<td>Définition initiale.</td>
</tr>
<tr>
<td>{{SpecName('CSS1', '#border-left-width', 'border-bottom-width')}}</td>
<td>{{Spec2('CSS1')}}</td>
<td>Définition initiale.</td>
</tr>
</tbody>
</table>
<p>{{cssinfo}}</p>
<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
<p>{{Compat("css.properties.border-bottom-width")}}</p>
<h2 id="Voir_aussi">Voir aussi</h2>
<ul>
<li>Les autres propriétés liées à la largeur de la bordure :
<ul>
<li>{{cssxref("border-left-width")}},</li>
<li>{{cssxref("border-right-width")}},</li>
<li>{{cssxref("border-top-width")}},</li>
<li>{{cssxref("border-width")}}</li>
</ul>
</li>
<li>Les autres propriétés CSS liées à la bordure du côté haut :
<ul>
<li>{{cssxref("border")}},</li>
<li>{{cssxref("border-bottom")}},</li>
<li>{{cssxref("border-bottom-style")}},</li>
<li>{{cssxref("border-bottom-color")}}.</li>
</ul>
</li>
</ul>
|
