CSS - Propriété border

Description de la propriété border.

Une bordure est définie par trois propriétés : la couleur, l'épaisseur et le type de trait. Ces paramètres peuvent être définis globalement pour l'ensemble des quatre côtés, ou au contraire être individualisés pour chacun des traits (en haut, à droite, en bas et à gauche). Ceci explique le nombre important de propriétés relatives aux bordures mais il ne s'agit que des combinaisons des trois paramètres de base et des quatre côtés.

La propriété raccourcie border définit une bordure identique pour les quatre côtés. Pour définir une bordure spécifique à un côté seulement, utilisez les propriétés border-top, border-right, border-bottom et border-left, dont la syntaxe est identique.

Pour plus d'informations sur les valeurs possibles, reportez-vous aux propriétés border-width, border-style et border-color.

Ne confondez pas bordures et contours. Reportez-vous à la description de la propriété CSS outline pour une présentation détaillée des différences entre bordures et contours.

Syntaxes pour border.

• border: none;

  Valeur par défaut. Aucune bordure n'est tracée autour de l'élément.

• border: solid;

  Syntaxe minimale : une bordure est tracée, avec l'épaisseur par défaut et la couleur par défaut.

• border: solid 2px green;

  Syntaxe complète, décrivant le type de bordure, son épaisseur et sa couleur.

• border: inherit | initial | unset;

  Reportez-vous à la description générale de ces valeurs.

Exemples.

Cliquez sur les exemples pour afficher leur code CSS.

Voir aussi...

Bordures - Propriétés.

• border-collapse : Mode d'encadrement des cellules de tableau.
• border-color : Définit la couleur des bordures.
• border-image : Résumé des propriétés des bordures réalisées avec des images.
• border-image-outset : Débordement de l'image de bordure.
• border-image-repeat : Mode de répétition de l'image de bordure.
• border-image-slice : Définit comment l'image de bordure est découpée.
• border-image-source : L'image utilisée pour construire la bordure.
• border-image-width : La largeur de la bordure image.
• border-radius : Rayon des angles arrondis.
• border-spacing : Espacement entre les cellules adjacentes dans un tableau.
• border-style : Type de bordure (simple, double, pointillé...).
• border-width : Epaisseur de la bordure.

Contours - Propriétés.

• outline : Résumé des caractérisitques d'encadrement.
• outline-color : Définit la couleur de l'encadrement (outline).
• outline-offset : Espacement entre contour et élément.
• outline-style : Type de trait de l'encadrement (simple, double, pointillé...).
• outline-width : Epaisseur du trait d'encadrement.