Bordures en CSS

Avoir des bordures pour délimiter une zone, mettre en relief une information ou pour entourer les cellules d'un tableau, est très répandu sur les pages web. Pour des bordures simples, nul besoin d'avoir recours à des images.

Border un paragraphe, une image ou un bloc d'une ou plusieurs bordures est d'une simplicité enfantine...

N'hésitez pas à nous faire part de votre avis sur cet article : 2 commentaires

Article lu fois.

Les deux auteurs

Pascale Lambert

Kerod

L'article

Publié le 6 juillet 2010 - Mis à jour le 24 novembre 2010

Version PDF Version hors-ligne

ePub, Azw et Mobi

I. Bordures en CSS▲

Fonctionne avec :

(Presque) Tous les navigateurs graphiques.

Propriétés utilisées :

border-width ;
border-style ;
border-color ;
padding.

La propriété permettant d'obtenir une bordure en CSS est tout simplement border. A cet attribut, on pourra associer une épaisseur de bordure (border-width), un style (border-style) et une couleur (border-color).

Si toutes les bordures doivent être identiques ces trois informations peuvent être synthétisées de la façon suivante :

Sélectionnez

border: width style color

I-A. Epaisseur des bordures▲

Les épaisseurs des bordures peuvent être déclarées en de nombreuses unités, mais l'usage est d'utiliser les pixels (px).

Sélectionnez

border-width:2px;

I-B. Style de bordures (CSS 2.1)▲

Huit styles sont possibles en CSS 2.1 (la valeur par défaut étant none) :

dotted (pointillé) ;
dashed (tirets) ;
solid (solide) ;
double (double) ;
groove (rainurée) ;
ridge (relief) ;
inset (relief intérieur) ;
outset (relief extérieur).

Petit problème : entre la théorie de rendu et la réalité, il y a un petit fossé. Selon les navigateurs, tel ou tel style ne produit pas forcément l'effet escompté...

Par exemple, en dessous d'une épaisseur 3 pixels, pas grande chance de voir le rendu de double (ce qui est logique du reste...).
Avec MSIE 7 et 8 seuls les quatre premiers donnent un rendu correct à tous les coups.
Avec MSIE6... non : laissez tomber, il n'y a que solid et double qui donnent le rendu souhaité !

I-C. Exemple de code CSS▲

Sélectionnez

p {
  border-width:1px;
  border-style:dotted;
  border-color:black;
}

Ou :

Sélectionnez

p {
  border:1px dotted black;
}

Résultat attendu :

Résultat obtenu :

Voir l'exemple.

I-D. Applications▲

Ensuite, tout est permis, ou presque. On peut attribuer ces bordures à n'importe quel élément HTML, qu'il soit de type "bloc" (block) ou "en-ligne" (inline), et même différencier chacune d'elle si besoin.
On peut aussi mettre des marges intérieures (padding) pour aérer la présentation.

Encadrer un élément ;
Appliquer des bordures différentes à un même bloc ;
Une seule bordure ;
Bordures arrondies.

I-E. Encadrer un élément▲

Code (X)HTML

Sélectionnez

<p>Exemple avec un <span>span</span> qui est de type inline</p>

Code CSS

Sélectionnez

span {
  border:1px solid red;
  padding:3px;
}

I-F. Appliquer des bordures différentes à un même bloc▲

Lorsqu'on indique plusieurs valeurs différentes à la même propriété, la 1ère est celle qui va être appliquée en haut, puis on tourne dans le sens des aiguilles d'une montre.
Quand on en indique que deux, la première concerne le haut et le bas, la seconde la droite et la gauche.

Code (X)HTML

Sélectionnez

<div>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
    Duis eget ligula quis libero mollis dapibus.</p>
  <p>Suspendisse potenti. Nullam facilisis neque et sem. 
    Proin placerat adipiscing urna. Aenean sollicitudin.</p>
</div>

Code CSS

Sélectionnez

div {
  border-width:1px 2px 3px 2px;
  border-style:solid dotted;
  border-color:black red;
  padding:0 10px;
}

Et contrairement à ce que je lu je ne sais plus où, on peut déclarer les couleurs avant les tailles, les tailles après les styles... en fait l'ordre n'a aucune importance.

I-G. Une seule bordure▲

Si on veut se limiter à une seule bordure (par exemple pour "souligner" un titre), on pourra adopter la syntaxe suivante :

Code (X)HTML

Sélectionnez

<h2>Titre</h2>
<p>Suspendisse potenti. Nullam facilisis neque et sem. 
  Proin placerat adipiscing urna. Aenean sollicitudin.</p>

Code CSS

Sélectionnez

h2 {
  border-bottom:1px dashed green;
}

I-H. Bordures à coins arrondis▲

Comme expliqué dans le tutoriel "coins arrondis", on peut aussi arrondir les coins grâce à la propriété CSS3 border-radius.
Seul hic, elle n'est pas encore implémentée dans les tous navigateurs, et il faut utiliser des préfixes spécifiques : -moz- pour les navigateurs gecko (firefox, seamonkey) et -webkit- pour les navigateurs webkit (safari, chrome).

Sélectionnez

<div>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
    Duis eget ligula quis libero mollis dapibus.</p>
  <p>Suspendisse potenti. Nullam facilisis neque et sem. 
    Proin placerat adipiscing urna. Aenean sollicitudin.</p>
</div>

Code CSS

Sélectionnez

div {
  padding:0 10px;
  border:3px double black;
  border-radius:10px;
  -moz-border-radius:10px;
  -webkit-border-radius:10px;
}

Résultat attendu :

Voir le résultat.

Les sources présentées sur cette page sont libres de droits et vous pouvez les utiliser à votre convenance. Par contre, la page de présentation constitue une œuvre intellectuelle protégée par les droits d'auteur. Copyright © 06/07/2010 Pascale Lambert. Aucune reproduction, même partielle, ne peut être faite de ce site ni de l'ensemble de son contenu : textes, documents, images, etc. sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.