Bordures CSS

Comment travailler avec des bordures en CSS

La bordure est une fine couche entre le rembourrage et la marge. En modifiant la bordure, vous pouvez faire en sorte que les éléments dessinent leur périmètre à l'écran.

Vous pouvez travailler sur les bordures en utilisant ces propriétés:

  • border-style
  • border-color
  • border-width

La propriétéborderpeut être utilisé comme un raccourci pour toutes ces propriétés.

border-radiusest utilisé pour créer des coins arrondis.

Vous avez également la possibilité d'utiliser des images comme bordures, une capacité qui vous est donnée parborder-imageet ses propriétés distinctes spécifiques:

  • border-image-source
  • border-image-slice
  • border-image-width
  • border-image-outset
  • border-image-repeat

Commençons avecborder-style.

Le style de bordure

Leborder-stylepropriété vous permet de choisir le style de la bordure. Les options que vous pouvez utiliser sont:

  • dotted
  • dashed
  • solid
  • double
  • groove
  • ridge
  • inset
  • outset
  • none
  • hidden

Vérifierce Codepenpour un exemple en direct

La valeur par défaut du style estnone, donc pour faire apparaître la bordure, vous devez la changer en autre chose.solidest un bon choix la plupart du temps.

Vous pouvez définir un style différent pour chaque arête à l'aide des propriétés

  • border-top-style
  • border-right-style
  • border-bottom-style
  • border-left-style

ou vous pouvez utiliserborder-styleavec plusieurs valeurs pour les définir, en utilisant l'ordre habituel Haut-Droite-Bas-Gauche:

p {
  border-style: solid dotted solid dotted;
}

La largeur de la bordure

border-widthest utilisé pour définir la largeur de la bordure.

Vous pouvez utiliser l'une des valeurs prédéfinies:

  • thin
  • medium(la valeur par défaut)
  • thick

ou exprimer une valeur en pixels, em ou rem ou toute autre valeur de longueur valide.

Exemple:

p {
  border-width: 2px;
}

Vous pouvez définir la largeur de chaque bord (haut-droit-bas-gauche) séparément en utilisant 4 valeurs:

p {
  border-width: 2px 1px 2px 1px;
}

ou vous pouvez utiliser les propriétés d'arête spécifiquesborder-top-width,border-right-width,border-bottom-width,border-left-width.

La couleur de la bordure

border-colorest utilisé pour définir la couleur de la bordure.

Si vous ne définissez pas de couleur, la bordure par défaut est colorée en utilisant la couleur du texte de l'élément.

Vous pouvez transmettre n'importe quelle valeur de couleur valide àborder-color.

Exemple:

p {
  border-color: yellow;
}

Vous pouvez définir la couleur de chaque bord (Haut-Droite-Bas-Gauche) séparément en utilisant 4 valeurs:

p {
  border-color: black red yellow blue;
}

ou vous pouvez utiliser les propriétés d'arête spécifiquesborder-top-color,border-right-color,border-bottom-color,border-left-color.

La propriété de raccourci frontière

Ces 3 propriétés mentionnées,border-width,border-styleetborder-colorpeut être défini à l'aide de la propriété abrégéeborder.

Exemple:

p {
  border: 2px black solid;
}

Vous pouvez également utiliser les propriétés spécifiques aux arêtesborder-top,border-right,border-bottom,border-left.

Exemple:

p {
  border-left: 2px black solid;
  border-right: 3px red dashed;
}

Le rayon de la frontière

border-radiusest utilisé pour définir les coins arrondis de la bordure. Vous devez passer une valeur qui sera utilisée comme rayon du cercle qui sera utilisé pour arrondir la bordure.

Usage:

p {
  border-radius: 3px;
}

Vous pouvez également utiliser les propriétés spécifiques aux arêtesborder-top-left-radius,border-top-right-radius,border-bottom-left-radius,border-bottom-right-radius.

Utiliser des images comme bordures

Une chose très intéressante avec les bordures est la possibilité d'utiliser des images pour les styliser. Cela vous permet d'être très créatif avec les frontières.

Nous avons 5 propriétés:

  • border-image-source
  • border-image-slice
  • border-image-width
  • border-image-outset
  • border-image-repeat

et la sténographieborder-image. Je n'entrerai pas dans beaucoup de détails ici car les images en tant que bordures auraient besoin d'une couverture plus approfondie que celle que je peux faire dans ce petit chapitre. Je recommande de lire leEntrée d'almanach CSS Tricks sur border-imagepour plus d'informations.

Téléchargez mon gratuitManuel CSS


Plus de didacticiels CSS: