Une notion assez importante et intéressante du CSS concerne les bordures. Effectivement, que ce soit pour un paragraphe, pour un tableau, pour une image ou quoique ce soit d'autre, il est souvent plus esthétique d'avoir une fine bordure autour de l'élément. Il faut pour cela utiliser le CSS et jouer avec les propriétés concernant les bordures.

Une bordure est composée de 3 propriétés : son épaisseur, son style (trait plein, pointillé,...) et sa couleur. Il existe également 4 bordures différentes que nous pouvons modifier : celle de gauche, celle de droite, celle du haut et celle du bas. Il y a beaucoup de façons pour faire cela, nous les verrons donc une à une.

Comme nous l'avons vu, il existe 4 bordures différentes ainsi que 3 propriétés pour chacune d'entre elles. Pour modifier une propriété d'une des bordures, il faut utiliser le préfixe correspondant à la bordure désirée. Voici donc les 4 préfixes possibles :

border-top : Bordure du haut.
border-left : Bordure de gauche.
border-right : Bordure de droite.
border-bottom : Bordure du bas.

Il y a deux façons pour modifier les propriétés des bordures en question. Vous pouvez soit les modifier toutes les 3 d'un coup, soit les modifier une par une. Voici les 3 propriétés possibles :

width : Définit l'épaisseur de la bordure.
style : Définit le style de la bordure.
color : Définit la couleur de la bordure.

Nous allons voir, par exemple, comment modifier la bordure du bas d'un paragraphe. Créez donc la feuille de styles contenant le code suivant :

div { border-bottom-width:1px; border-bottom-style:solid; border-bottom-color:black; }

Créez maintenant une page dans laquelle vous taperez, en plus du squelette HTML :

<div>Définition de la bordure du bas</div>

Si vous affichez votre page dans le navigateur, voilà ce que cela donnera :


Comme vous le voyez, la bordure du bas est bien visible, avec une largeur de 1 pixel et une couleur noire. L'attribut color peut soit prendre des couleurs au format hexadécimal précédée d'une dièse (ex : #FF0000), mais peut aussi prendre comme valeur le nom d'une couleur en anglais (ex: red, black,...). L'attribut style, quant à lui, peut prendre plusieurs valeurs différentes dont en voici une liste :

none : Aucune bordure.
dotted : Bordure en pointillé (sauf internet explorer).
dashed : Bordure en tirets (sauf internet explorer).
solid : Bordure continue.
double : Bordure en double trait.
groove : bordure en creux.
ridge : Bordure en saillie.
inset : Bordure en 3d lumière basse.
outset : Bordure en 3d lumière haute.

Il est également possible de modifier les 3 propriétés d'une bordure d'un seul coup, effectivement, il suffit de juste taper le préfixe de la bordure et de lui attribuer comme valeur, la valeur des 3 propriétés séparées par un espace avec comme ordre : épaisseur, style et couleur. La feuille de style précédemment tapée aurait donc pu contenir le code suivant :

div { border-bottom:1px solid black; }

Cela aurait donné exactement le même résultat.

Nous utilisons les préfixes border-top, border-bottom, border-left et border-right lorsque nous désirons modifier l'apparence des bordures séparemment. Cependant, il arrive souvent que toutes les bordures doivent avoir le même style, c'est donc une perte de temps de taper 4 fois la même ligne en modifiant juste le nom de l'attribut. En effet, il est possible de modifier toutes les bordures d'un seul coup en utilisant l'attribut border tout simplement. Regardez par exemple la feuille de style suivante :

div { border:1px solid black; }

Si, dans une page HTML, nous entourons du texte de balises div, cela donnera :



Il est bien évidemment possible de modifier les propriétés une par une en utilisant border-width, border-style et border-color.

Il reste une possibilité de modifier encore un peu le style des bordures, mais cette technique ne fonctionne que sous Firefox. Cet attribut, qui se nomme -moz-border-radius, permet d'arrondir le bord des bordures. Cet attribut peut être suivi de 1, 2 ou 4 valeurs. Si une seule valeur est présente, le rayon de courbure fixé sera commun aux quatre coins. Si 2 valeurs sont définies, alors la première définit le rayon de courbure des bord haut-gauche et bas-droit alors que la seconde valeur définit le rayon pour les coins bas-gauche et haut-droit. Enfin, si 4 valeurs sont présentes, elles définiront respectivement le rayon de courbure pour les bord haut-gauche, haut-droit, bas-droit et bas-gauche.

Imaginez la feuille de style suivante :

div { border: 1px solid black; -moz-border-radius: 10px; padding:10px; }

Si vous disposez sur votre page Web d'une phrase entourée d'une balise div, votre page ressemblera à ceci :


Si vous êtes sous Internet Explorer et que vous ne voyez rien de spécial, c'est normal car cela ne fonctionne que sous Firefox. Pour les utilisateurs de ce dernier, vous remarquerez assez vite que les coins du cadre sont arrondi.