Les bordures

Styles de trait de la bordure : border-style

Le type de bordure d’un élément CSS est fixé par la propriété CSS border-style. Voici les différents styles disponibles, avec leur équivalent en langage CSS :

• aucune bordure (none)

• pointillés (dotted)

• tirets (dashed)

• trait plein (solid)

• trait double (double)

• « bosselé » (groove)

• crête (ridge)

• incrusté (inset)

• en relief (outset).

 

Aperçu du rendu des différents styles de bordure

En CSS, vous pouvez imposer un type de bordure unique pour les 4 côtés d’un bloc avec la propriété border-style.

border-style: solid;

 

Si à l’inverse vous souhaitez que les bordures soient différentes sur certains côtés, utilisez les propriétés CSS border-top-style, border-right-style, border-bottom-style et border-left-style.

Epaisseur du trait de bordure : border-width

En CSS, vous pouvez indiquer une largeur de bordure identique pour les 4 côtés d’un bloc avec la propriété border-width.

border-width: 3px;

 

Si vous souhaitez que les bordures soient d’épaisseurs différentes, utilisez les propriétés CSS border-top-width, border-right-width, border-bottom-width et border-left-width .

Couleur de la bordure : border-color

Cette propriété définit la couleur de la bordure.

 

En CSS, vous pouvez indiquer une couleur de bordure identique pour les 4 côtés d’un bloc avec la propriété border-color.

 

Vous pouvez indiquer la couleur choisie en saisissant :

• le code hexadécimal d’une couleur sous la forme #aabbcc, où aa indique la proportion de rouge, bb la proportion de vert et cc la proportion de bleu

• le code d’une couleur en notation RGB sous la forme rgb(aaa,bbb,ccc)

• le nom de la couleur en anglais. Cette méthode fonctionne uniquement pour les couleurs les plus fréquentes, parmi lesquelles : white, black, blue, green, red, purple, pink, yellow, silver, gray, lime, ...

border-color: red;

 

Si vous souhaitez que chaque côté possède sa propre couleur, utilisez les propriétés CSS border-top-color, border-right-color, border-bottom-color et border-left-color .

Propriété globale de bordure : border

Il existe une propriété globale border qui permet d’indiquer, en une seule ligne de code CSS, le type, l’épaisseur et la couleur de la bordure.

border: 2px solid green;

 

La propriété border impose la même couleur, la même épaisseur et le même style de trait aux 4 côtés d’un bloc. Si vous souhaitez varier l’épaisseur, le style et/ou la couleur des bordures pour l'un des côtés, vous pouvez utiliser les propriétés border-top, border-right, border-bottom et border-left .

 

Ces propriétés peuvent être combinées entre elles. Par exemple, le code suivant créera un bloc entouré d’une bordure continue rouge de 3px, sauf sur le côté gauche où la bordure sera composée de 2 traits jaunes et fera 10px de large :

border: 3px solid red;
border-left: 10px double yellow;

 

Les deux lignes de code précédentes, tapées dans l’ordre inverse, ne produiront pas le même résultat. En effet, comme la règle border s’applique aux 4 côtés de la bordure, si on l’appelle en dernier, elle annulera l’effet de border-left.

Pour plus d'informations, vous pouvez nous contacter par mail.