Propriété CSS border
La propriété border est une propriété CSS raccourcie qui définit les quatre côtés d'un élément. Exemples à essayer directement.
La propriété CSS border est un raccourci qui définit border-width, border-style et border-color pour les quatre côtés d'un élément en une seule déclaration. Les valeurs de largeur négatives ne sont pas autorisées.
Cette page couvre la syntaxe raccourcie, les valeurs acceptées, la manière de donner à chaque côté une apparence différente, et les propriétés associées à utiliser lorsque le raccourci ne suffit pas.
Utilisez le raccourci border lorsque vous souhaitez la même bordure sur les quatre côtés :
/* shorthand — all four sides identical */
border: 2px solid #1c87c9;
/* equivalent longhand */
border-width: 2px;
border-style: solid;
border-color: #1c87c9;Lorsque les côtés doivent différer, définissez les propriétés longues individuellement — chacune accepte jusqu'à quatre valeurs dans l'ordre haut–droite–bas–gauche. Vous pouvez aussi cibler un côté avec border-top, border-right, border-bottom et border-left.
La valeur border-style est ce qui rend une bordure visible. Si vous définissez uniquement une largeur et une couleur mais laissez le style à sa valeur par défaut none, la bordure reste invisible.
| Valeur initiale | medium none currentColor |
|---|---|
| S'applique à | Tous les éléments. S'applique aussi à ::first-letter. |
| Hérité | Non. |
| Animatable | Oui. La largeur, la couleur et le style de la bordure sont animables. |
| Version | CSS1 |
| Syntaxe DOM | object.style.border = "5px solid green"; |
Syntaxe
Syntaxe de la propriété CSS border
border: border-width border-style border-color | initial | inherit;Exemple de la propriété border :
Exemple de la propriété CSS border avec la valeur solid
<!DOCTYPE html>
<html>
<head>
<title>The title of the document</title>
<style>
p {
border: thick solid #8ebf42;
padding: 5px;
}
</style>
</head>
<body>
<h2>Border property example</h2>
<p>This paragraph's border is set to "thick solid green".</p>
</body>
</html>Résultat
Voici un autre exemple où le style de la bordure est en pointillés, la largeur est définie à 3px et la couleur est bleue.
Exemple de la propriété border avec la valeur "dashed" :
Exemple de la propriété CSS border avec la valeur dashed
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
border: 3px dashed #1c87c9;
padding: 10px;
}
</style>
</head>
<body>
<h2>Border property example</h2>
<p>This paragraph's border is set to "3px dashed blue".</p>
</body>
</html>Le raccourci border peint toujours les quatre côtés de façon identique. Pour différencier un côté, remplacez l'une des propriétés longues après. Dans l'exemple suivant, une seule déclaration border-color prend trois valeurs : la première s'applique au côté supérieur, la deuxième aux côtés droit et gauche, et la troisième au côté inférieur.
Exemple de la propriété border avec 3 valeurs border-color :
Exemple de la propriété CSS border-color
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
border: 3px solid;
border-color: #1c87c9 #666 #8ebf42;
padding: 5px;
}
</style>
</head>
<body>
<h2>Border property example</h2>
<div>Here 3 values are applied to the border-color property.</div>
</body>
</html>Exemple de la propriété border-style :
Exemple de la propriété CSS border avec les valeurs solid, dotted et double
<!DOCTYPE html>
<html>
<head>
<title>The title of the document</title>
<style>
p,
div {
padding: 5px;
}
.border1 {
border: 5px solid #ccc;
}
.border2 {
border: 5px dotted #1c87c9;
}
div {
border: thick double #8ebf42;
}
</style>
</head>
<body>
<h2>Border property example</h2>
<p class="border1">A heading with a solid gray border.</p>
<p class="border2">A heading with a dotted blue border.</p>
<div>A div element with a thick double green border.</div>
</body>
</html>Coins arrondis et propriétés associées
Le raccourci border ne contrôle pas le rayon des coins. Pour arrondir les coins, ajoutez la propriété border-radius séparément :
p {
border: 3px solid #1c87c9;
border-radius: 8px;
}Quelques propriétés associées méritent d'être connues :
- border-radius — arrondit les coins.
- outline — trace une ligne à l'extérieur de la bordure sans occuper d'espace dans la mise en page.
- border-collapse — fusionne les bordures adjacentes des cellules d'un tableau en une seule ligne.
Valeurs
Le raccourci accepte les trois propriétés longues de bordure dans n'importe quel ordre, ainsi que les mots-clés globaux.
| Valeur | Description |
|---|---|
| border-width | Définit la largeur de la bordure. La valeur par défaut est "medium". |
| border-style | Définit le style de la bordure. La valeur par défaut est "none". |
| border-color | Définit la couleur de la bordure. La valeur par défaut est la couleur actuelle de l'élément. |
| initial | Définit la propriété à sa valeur par défaut. |
| inherit | Hérite de la propriété de son élément parent. |