Propriété CSS border
La propriété CSS border est une propriété raccourcie qui définit les valeurs des propriétés border-width, border-style et border-color pour tous les côtés d'un élément. Les valeurs négatives ne sont pas autorisées.
La propriété raccourcie border est utilisée quand on veut faire tous les quatres côtés le même. On peut changer 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é.
| Valeur initiale | medium none currentColor |
| Appliquée à | Tous les éléments. Elle est aussi appliquée à pseudo-élément ::first-letter. |
| Héritée | Non. |
| Animable | Oui. Largeur, couleur et style de la bordure sont animables. |
| Version | CSS1 |
| Syntaxe DOM | object.style.border = "5px solid green"; |
Syntaxe
border: border-width border-style border-color | initial | inherit;Exemple
<!DOCTYPE html>
<html>
<head>
<title>Titre du document</title>
<style>
p {
border: thick solid #8ebf42;
padding: 5px;
}
</style>
</head>
<body>
<h2>Exemple de la propriété border</h2>
<p>La bordure de ce paragraphe est définie "thick solid green".</p>
</body>
</html>Voyons un autre exemple, où le style de la bordure est de tirets (dashed), la largeur est définie à 3px et la couleur de la bordure est bleu.
Exemple
<!DOCTYPE html>
<html>
<head>
<title>Titre du document</title>
<style>
p {
border: 3px dashed #1c87c9;
padding: 10px;
}
</style>
</head>
<body>
<h2>Exemple de la propriété border</h2>
<p>La bordure de ce paragraphe est définie à "3px dashed blue".</p>
</body>
</html>Voyons un autre exemple avec la propriété border-color qui a 3 valeurs appliquées. La première est appliquée à la bordure supérieure, la deuxième aux bordures droite et gauche, et la troisième à l'inférieure.
Exemple
<!DOCTYPE html>
<html>
<head>
<title>Titre du document</title>
<style>
div {
border: 3px solid;
border-color: #1c87c9 #666 #8ebf42;
padding: 5px;
}
</style>
</head>
<body>
<h2>Exemple de la propriété border</h2>
<div>Ici 3 valeurs sont appliquées à la propriété border-color.</div>
</body>
</html>Un autre exemple avec 3 valeurs.
Exemple
<!DOCTYPE html>
<html>
<head>
<title>Titre du 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 la propriété border</h2>
<p class="border1">Un titre avec une bordure verte et solide.</p>
<p class="border2">Un titre avec une bordure bleu et en pointillé.</p>
<div>Un élément div avec une double borudre verte.</div>
</body>
</html>Valeurs
| Valeur | Description |
|---|---|
| border-width | Définit la largeur de la bordure. La valeur initiale est "medium". |
| border-style | Définit le style de la bordure. La valeur initiale est "none". |
| border-color | Définit la couleur de la bordure. La valeur initiale est le couleur actuel de l'élément. |
| initial | Définit la valeur initiale. |
| inherit | Hérite la propriété de l'élément parent. |
Support de Navigateurs
|
|
|
|
|---|---|---|---|
| 1.0+ | 1.0+ | 1.0+ | 3.5+ |
Pratiquez vos connaissances
