Bordures 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.

Plus de didacticiels CSS:

• Le guide Flexbox
• Tutoriel CSS Grid
• Variables CSS (propriétés personnalisées)
• Introduction à PostCSS
• La propriété CSS margin
• Comment centrer un élément avec CSS
• Polices système CSS
• Comment imprimer votre HTML avec style
• Un guide d'introduction aux transitions CSS
• Un didacticiel sur les animations CSS
• Introduction au CSS
• Le guide CSS
• Comment configurer Tailwind avec PurgeCSS et PostCSS
• La feuille de triche de Tailwind
• Comment faire pivoter en continu une image en utilisant CSS
• Rendre un tableau réactif en utilisant CSS
• Comment déboguer CSS en divisant en deux
• Sélecteurs CSS
• Cascade CSS
• Spécificité CSS
• Sélecteurs d'attributs CSS
• Couleurs CSS
• Unités CSS
• URL CSS ()
• Typographie CSS
• Le modèle CSS Box
• La propriété de position CSS
• Requêtes multimédias CSS et conception réactive
• Requêtes de fonctionnalités CSS
• Transformations CSS
• Comment styliser des listes en utilisant CSS
• Préfixes de fournisseur CSS
• Héritage CSS
• Pseudo-classes CSS
• Pseudo éléments CSS
• Styliser les tableaux HTML avec CSS
• La propriété d'affichage CSS
• La fonction CSS calc ()
• Bordures CSS
• Importer un fichier CSS avec @import
• Gestion des erreurs CSS
• Filtres CSS
• Dimensionnement de la boîte CSS
• Arrière-plans CSS
• Commentaires CSS
• Polices CSS
• Remplissage CSS
• La propriété CSS float et la compensation
• Normalisation CSS
• La propriété CSS z-index
• Comment désactiver la sélection de texte à l'aide de CSS
• Comment mettre un élément au bas de son conteneur en utilisant CSS
• Comment inverser les couleurs en utilisant CSS
• Balises pré réactives en CSS
• Intégrations de vidéos YouTube réactives
• Quelles sont les bonnes valeurs CSS Breakpoint pour le Responsive Design?
• Comment aligner le centre dans Flexbox