Côtés de bordure CSS

Bordure CSS - Bord individuel

À partir de l'exemple de la chapitre précédent, vous avez vu que vous pouvez spécifier différents bords pour chaque côté.

Dans CSS, il existe également des attributs qui peuvent être utilisés pour spécifier chaque bord (haut, droite, bas et gauche) :

Exemple

p {
  border-top-style: dotted;
  border-right-style: solid;
  border-bottom-style: dotted;
  border-left-style: solid;
}

Résultat :

Différents styles de bordure

Essayez-le vous-même

Différents styles de bordure

Le résultat de l'exemple précédent est le même que celui-ci :

Exemple

p {
  border-style: pointillé solide;
}

Essayez-le vous-même

Son principe de fonctionnement est le suivant :

Si border-style L'attribut de configuration de quatre valeurs :

border-style: pointillé solide double interrompu;

  • Le bord supérieur est une ligne brisée
  • Le bord droit est une ligne pleine
  • Le bord inférieur est une ligne double
  • Le bord gauche est une ligne brisée

Si border-style L'attribut de configuration de trois valeurs :

border-style: pointillé solide double;

  • Le bord supérieur est une ligne brisée
  • les bords droit et gauche sont en ligne
  • Le bord inférieur est une ligne double

Si border-style Propriété définie avec deux valeurs :

border-style: pointillé solide;

  • les bords supérieur et inférieur sont en tiret
  • les bords droit et gauche sont en ligne

Si border-style Propriété définie avec une valeur :

border-style: pointillé;

  • Tous les quatre côtés sont en tiret

Exemple

/* Quatre valeurs */
p {
  border-style: pointillé solide double interrompu; 
}
/* Trois valeurs */
p {
  border-style: pointillé solide double; 
}
/* Deux valeurs */
p {
  border-style: pointillé solide; 
}
/* Une valeur */
p {
  border-style: pointillé; 
}

Essayez-le vous-même

Dans l'exemple précédent, on utilise border-style Propriété. Mais border-width et border-color est également applicable.