La bordure CSS est une propriété abrégée utilisée pour définir la bordure d’un élément.
Les propriétés de la bordure CSS permettent de spécifier le style, la couleur et la taille de la bordure d’un élément. Les propriétés de la bordure CSS sont données ci-dessous
- border-style
- border-color
- border-width
- border-radius
1) style de bordure CSS (border-style)
La propriété Style de bordure permet de spécifier le type de bordure que vous souhaitez afficher sur la page Web.
Certaines valeurs de style de bordure sont utilisées avec une propriété de style de bordure pour définir une bordure.
| Valeur | La déscription |
|---|---|
| none | Cela ne définit aucune bordure. |
| dotted | Il est utilisé pour définir une bordure en pointillé. |
| dashed | Il est utilisé pour définir une bordure en pointillé avec les tirets. |
| solid | Il est utilisé pour définir une bordure solide. |
| double | Il définit deux bordures avec la même valeur de largeur de bordure. |
| groove | Il définit une bordure 3D rainurée. L’effet est généré en fonction de la valeur de la couleur de bordure. |
| ridge | Il définit une bordure striée en 3D. L’effet est généré en fonction de la valeur de la couleur de bordure. |
| inset | Il définit une bordure incrustée en 3D. L’effet est généré en fonction de la valeur de la couleur de bordure. |
| outset | Il définit une bordure de départ 3D. L’effet est généré en fonction de la valeur de la couleur de bordure. |
<!DOCTYPE html>
<html>
<head>
<style>
p.none {border-style: none;}
p.dotted {border-style: dotted;}
p.dashed {border-style: dashed;}
p.solid {border-style: solid;}
p.double {border-style: double;}
p.groove {border-style: groove;}
p.ridge {border-style: ridge;}
p.inset {border-style: inset;}
p.outset {border-style: outset;}
p.hidden {border-style: hidden;}
</style>
</head>
<body>
<p class="none">Pas de bordure.</p>
<p class="dotted">Une bordure en pointillé.</p>
<p class="dashed">Une bordure en tiret.</p>
<p class="solid">Une bordure solide.</p>
<p class="double">Une double bordure.</p>
<p class="groove">Une bordure de gorge.</p>
<p class="ridge">Une bordure de crête.</p>
<p class="inset">Une bordure incrustée.</p>
<p class="outset">Une bordure de départ.</p>
<p class="hidden">Une bordure cachée.</p>
</body>
</html>
Résultat :
2) CSS border-width
La propriété border-width est utilisée pour définir la largeur de la bordure. Il est défini en pixels. Vous pouvez également utiliser l’une des trois valeurs prédéfinies, mince, moyenne ou épaisse pour définir la largeur de la bordure.
Remarque: La propriété border-width n’est pas utilisée seule. Il est toujours utilisé avec d’autres propriétés de bordure, comme la propriété « border-style« , pour définir la bordure en premier, sinon cela ne fonctionnera pas.
<!DOCTYPE html>
<html>
<head>
<style>
p.one {
border-style: solid;
border-width: 5px;
}
p.two {
border-style: solid;
border-width: medium;
}
p.three {
border-style: solid;
border-width: 1px;
}
</style>
</head>
<body>
<p class="one">Écrivez votre texte ici.</p>
<p class="two">Écrivez votre texte ici.</p>
<p class="three">Écrivez votre texte ici.</p>
</body>
</html>
3) CSS border-color
Il existe trois méthodes pour définir la couleur de la bordure.
- Name: spécifie le nom de la couleur. Par exemple: « red ».
- RVB: spécifie la valeur RVB de la couleur. Par exemple: « rgb (255,125,0) ».
- Hex: spécifie la valeur hexadécimale de la couleur. Par exemple: « # ccff00 ».
Il y a aussi une couleur de bordure nommée « transparent« . Si la couleur de la bordure n’est pas définie, elle est héritée de la propriété color de l’élément.
Remarque: La propriété border-color n’est pas utilisée seule. Il est toujours utilisé avec d’autres propriétés de bordure, comme la propriété « border-style« , pour définir la bordure en premier, sinon cela ne fonctionnera pas.
<!DOCTYPE html>
<html>
<head>
<style>
p.one {
border-style: solid;
border-color: red;
}
p.two {
border-style: solid;
border-color: #98bf21;
}
</style>
</head>
<body>
<p class="one">Bordure rouge et solide</p>
<p class="two">Bordure verte et solide</p>
</body>
</html>