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
|
---
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>
<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 :
<ul>
<li><code>thin</code> (fin)</li>
<li><code>medium</code> (intermédiaire)</li>
<li><code>thick</code> (épais)</li>
</ul>
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>
{{csssyntax}}
<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>
<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>
|
