Les propriétés CSS border vous permettent de spécifier le style, la largeur et la couleur de la bordure d'un élément.
J'ai des frontières de tous les côtés.
J'ai une bordure inférieure rouge.
J'ai des bordures arrondies.
La propriété class="w3-codespan">border-style
spécifie le type de bordure à afficher.
Les valeurs suivantes sont autorisées :
class="w3-codespan">dotted
- Définit une bordure en pointillés
class="w3-codespan">solid
- Définit une bordure solide
class="w3-codespan">double
- Définit une double bordure
class="w3-codespan">groove
- Définit une bordure rainurée 3D. L'effet dépend de la valeur de la couleur de la bordure
class="w3-codespan">ridge
- Définit une bordure striée 3D. L'effet dépend de la valeur de la couleur de la bordure
class="w3-codespan">inset
- Définit une bordure incrustée 3D. L'effet dépend de la valeur de la couleur de la bordure
class="w3-codespan">outset
- Définit une bordure initiale 3D. L'effet dépend de la valeur de la couleur de la bordure
class="w3-codespan">none
- Ne définit aucune frontière
class="w3-codespan">hidden
- Définit une bordure cachée
La propriété class="w3-codespan">border-style
peut avoir de une à quatre valeurs (par exemple la bordure supérieure, la bordure droite, la bordure inférieure et la bordure gauche).
Démonstration des différents styles de bordure :
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.none {border-style: none;}
p.hidden {border-style: hidden;}
p.mix {border-style: dotted dashed solid double;}
Résultat :
A dotted border.
A dashed border.
A solid border.
A double border.
A groove border. The effect depends on the border-color value.
A ridge border. The effect depends on the border-color value.
An inset border. The effect depends on the border-color value.
An outset border. The effect depends on the border-color value.
No border.
A mixed border.
Essayez-le vous-même →
<!DOCTYPE html>
<html>
<head>
<style>
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.none {border-style: none;}
p.hidden {border-style: hidden;}
p.mix {border-style: dotted dashed solid double;}
</style>
</head>
<body>
<h2>The border-style Property</h2>
<p>This property specifies what kind of border to display:</p>
<p class="dotted">A dotted border.</p>
<p class="dashed">A dashed border.</p>
<p class="solid">A solid border.</p>
<p class="double">A double border.</p>
<p class="groove">A groove border.</p>
<p class="ridge">A ridge border.</p>
<p class="inset">An inset border.</p>
<p class="outset">An outset border.</p>
<p class="none">No border.</p>
<p class="hidden">A hidden border.</p>
<p class="mix">A mixed border.</p>
</body>
</html>
Remarque : Aucune des AUTRES propriétés de bordure CSS (que vous découvrirez plus en détail dans les prochains chapitres) n'aura AUCUN effet à moins que la La propriété class="w3-codespan">border-style
est définie !