L'attribut border (bordure)

Lorsque l'on veut ajouter une bordure à un élément, on utilise l'attribut border.

On va jouer ensuite sur trois paramètres : l'épaisseur en nombre de pixels (px), le style (que je vais vous détailler ci-après) et la couleur (un petit rappel sur l'utilisation des codes couleurs ici dans le premier encart "Important" ==> clic ).

Les différents types de bordures et leur traduction en CSS
Un petit exemple illustré pour les modules :

Ci-contre : pas de bordure

.box {border: none;}

Bordure continue, blanche, de 3 pixels de large

.box {border: 3px solid #FFFFFF;}
 

Bordure double, blanche, de 3 pixels de large

.box {border: 3px double #FFFFFF;}
 

Bordure pointillée, blanche, toujours de 3 pixels de large

.box {border: 3px dotted #FFFFFF;}
 

Autre style de bordure pointillée

.box {border: 3px dashed #FFFFFF;}
 

Les bordures en relief :

Afin de rendre un meilleur effet, j'ai modifié la largeur des bordures suivantes ainsi que leur couleur.

.box {border: 5px groove  #898BB4;}
 

.box {border: 5px ridge  #898BB4;}  

.box {border: 5px inset  #898BB4;}  

.box {border: 5px outset  #898BB4;}  

¤¤¤
Pour aller plus loin

Les différents types de bordure peuvent aussi être utilisés en HTML (mode source) :

- pour customiser un tableau par exemple


Pour cela, on introduit l'attribut border entre les balises <table> pour tout le tableau (la bordure verte dans mon exemple) et entre les balises <td> pour chaque cellule. Le code HTML est cependant différent du CSS :

<td style="border-color: #993399; border-width: 2px;border-style:dashed;">Ici, le texte écrit dans la cellule</td>

- ou faire un encart de texte


Faire un encart d'information avec la balise <div>
Le code HTML utilisé est alors le suivant :
<div style="border: 5px double #993399;">Votre texte ici</div>