CSS Bordures
Bordures CSS
Les propriétés de bordure CSS vous permettent de spécifier le style, la largeur et la couleur de la bordure d'un élément.
J'ai des bordures sur tous les côtés.
J'ai une bordure rouge en bas.
J'ai des bordures arrondies.
Style de Bordure CSS
La propriété border-style spécifie quel type de bordure afficher.
Les valeurs suivantes sont autorisées :
-
dotted- Définit une bordure pointillée -
dashed- Définit une bordure en tirets -
solid- Définit une bordure pleine -
double- Définit une double bordure -
groove- Définit une bordure en relief 3D. L'effet dépend de la valeur de la couleur de la bordure -
ridge- Définit une bordure en crête 3D. L'effet dépend de la valeur de la couleur de la bordure -
inset- Définit une bordure en retrait 3D. L'effet dépend de la valeur de la couleur de la bordure -
outset- Définit une bordure en saillie 3D. L'effet dépend de la valeur de la couleur de la bordure -
none- Définit aucune bordure -
hidden- Définit une bordure cachée
La propriété border-style peut avoir de une à quatre valeurs (pour la bordure supérieure, la bordure droite, la bordure inférieure et la bordure gauche).
Exemple
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 :
Une bordure pointillée.
Une bordure en tirets.
Une bordure pleine.
Une double bordure.
Une bordure en relief. L'effet dépend de la valeur de la couleur de la bordure.
Une bordure en crête. L'effet dépend de la valeur de la couleur de la bordure.
Une bordure en retrait. L'effet dépend de la valeur de la couleur de la bordure.
Une bordure en saillie. L'effet dépend de la valeur de la couleur de la bordure.
Aucune bordure.
Une bordure mixte.
Remarque : Aucune des AUTRES propriétés de bordure CSS (dont vous apprendrez davantage dans les chapitres suivants) n'aura d'EFFET à moins que la propriété border-style ne soit définie !