Propriété CSS border
La propriété CSS border est une propriété raccourcie qui définit les valeurs de border-width, border-style et border-color pour les quatre côtés d’un élément. Les valeurs négatives ne sont pas autorisées.
La propriété raccourcie border est utilisée lorsque vous souhaitez rendre les quatre côtés identiques. Vous pouvez modifier les bordures à l’aide des propriétés border-width, border-style et border-color, qui peuvent définir des valeurs différentes pour chaque côté.
INFO
Si la valeur n’est pas définie, les bordures sont invisibles.
| Initial Value | medium none currentColor |
|---|---|
| Applies to | All elements. It also applies to ::first-letter. |
| Inherited | No. |
| Animatable | Yes. Width, color and style of the border are animatable. |
| Version | CSS1 |
| DOM Syntax | 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>Exemple de propriété border</h2>
<p>La bordure de ce paragraphe est définie sur "thick solid green".</p>
</body>
</html>Résultat
Voyons un autre exemple où le style de la bordure est en tirets, la largeur est définie sur 3px et la couleur de la bordure 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>Exemple de propriété border</h2>
<p>La bordure de ce paragraphe est définie sur "3px dashed blue".</p>
</body>
</html>Voyons un autre exemple avec border-color où 3 valeurs sont appliquées. La première s’applique à la bordure supérieure, la deuxième à droite et à gauche, et la troisième à la bordure inférieure.
Exemple de la propriété border avec 3 valeurs :
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>Exemple de propriété border</h2>
<div>3 valeurs sont appliquées ici à la propriété border-color.</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>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>Exemple de propriété border</h2>
<p class="border1">Un titre avec une bordure grise pleine.</p>
<p class="border2">Un titre avec une bordure bleue en pointillés.</p>
<div>Un élément div avec une bordure verte double épaisse.</div>
</body>
</html>Valeurs
| Value | 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é sur sa valeur par défaut. |
| inherit | Hérite la propriété de son élément parent. |
Practice
Which of the following are valid border styles in CSS?