Bordure CSS

Attribut de bord CSS

CSS border L'attribut vous permet de spécifier le style, la largeur et la couleur des bords de l'élément.

Tous mes bords ont des bords.

J'ai un bord inférieur rouge.

J'ai des bords arrondis.

J'ai un bord gauche bleu.

Style de bord CSS

border-style L'attribut spécifie le type de bord à afficher.

Les valeurs suivantes sont autorisées :

  • dotted - Définir un bord en points
  • dashed - Définir un bord en pointillés
  • solid - Définir un bord solide
  • double - Définir un bord double
  • groove - Définir un bord groove 3D. L'effet dépend de la valeur de border-color
  • ridge - Définir un bord ridge 3D. L'effet dépend de la valeur de border-color
  • inset - Définir un bord inset 3D. L'effet dépend de la valeur de border-color
  • outset - Définir un bord outset 3D. L'effet dépend de la valeur de border-color
  • none - Définir un bord sans bordure
  • hidden - Définir un bord caché

border-style L'attribut peut définir une à quatre valeurs (utilisées pour le bord supérieur, le bord droit, le bord inférieur et le bord gauche).

Exemple

Afficher différents styles de bord :

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 :

Bordure en pointillé.

Bordure en trait pointillé.

Bordure en trait continu.

Bordure en double trait.

Bordure en rainure. Son effet dépend de la valeur de border-color.

Bordure en sillons. Son effet dépend de la valeur de border-color.

Bordure inset 3D. Son effet dépend de la valeur de border-color.

Bordure outset 3D. Son effet dépend de la valeur de border-color.

Pas de bordure.

Bordure cachée.

Bordure mixte.

Essayez-le vous-même

Attention :À moins que border-style Si l'attribut n'est pas défini, d'autres attributs de bordure CSS (qui seront détaillés dans le prochain chapitre) n'auront aucune incidence !