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 frontières de tous côtés.
J'ai une bordure inférieure rouge.
J'ai des bordures arrondies.
Style de bordure CSS
La border-style
propriété spécifie le type de bordure à afficher.
Les valeurs suivantes sont autorisées :
dotted
- Définit une bordure pointilléedashed
- Définit une bordure en pointilléssolid
- Définit une bordure solidedouble
- Définit une double borduregroove
- Définit une bordure rainurée 3D. L'effet dépend de la valeur border-colorridge
- Définit une bordure striée 3D. L'effet dépend de la valeur border-colorinset
- Définit une bordure d'encart 3D. L'effet dépend de la valeur border-coloroutset
- Définit une bordure de départ 3D. L'effet dépend de la valeur border-colornone
- Ne définit aucune bordurehidden
- Définit une bordure cachée
La border-style
propriété 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:
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.
Remarque : Aucune des AUTRES propriétés de bordure CSS (sur lesquelles vous en apprendrez plus dans les prochains chapitres) n'aura AUCUN effet à moins que la
border-style
propriété ne soit définie !