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 Donner une note à l'article (4.5)

Article lu   fois.

Les deux auteurs

Site personnel

Profil Pro

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 :

Image non disponible

Résultat obtenu :

Image non disponible

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;
}
                
Image non disponible

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.

Image non disponible

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;
}
                
Image non disponible

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 :

Image non disponible

Voir le résultat.

Liste de mes articles :
Principe des feuilles de style CSS - Commentez Donner une note à l'article (5)
Balises (X)HTML de base - 1 commentaire Donner une note à l'article (4.5)
Feuille de style CSS de base - Commentez Donner une note à l'article (3.5)
Mettre en forme un texte en CSS - Commentez Donner une note à l'article (4)
Gérer les marges en CSS - 5 commentaires Donner une note à l'article (4.5)
Résoudre les problèmes de marges en CSS - Commentez Donner une note à l'article (4)
Sélecteurs class et id - 3 commentaires Donner une note à l'article (5)
Mise en page full CSS - 4 commentaires Donner une note à l'article (4.5)
Bordures en CSS - 2 commentaires Donner une note à l'article (4.5)
Image de fond en CSS - 3 commentaires Donner une note à l'article (4.5)
Effets Rollover à l'aide de :hover - 2 commentaires Donner une note à l'article (4.5)
Aligner une image et du texte à l'aide de la propriété float - 1 commentaire Donner une note à l'article (4)
Listes à puces en image - 2 commentaires Donner une note à l'article (5)
Citations et retraits - Commentez Donner une note à l'article (4.5)
Concevez des boutons graphiques avec du CSS - 11 commentaires Donner une note à l'article (4.5)
Positionnez des images aux quatre coins d'une page web - 16 commentaires Donner une note à l'article (5)
Appliquez un effet de zoom sur une image avec les CSS - 1 commentaire Donner une note à l'article (4.5)
Zoomer une image façon thumbnail en CSS - 3 commentaires Donner une note à l'article (4.5)
Tableaux à bordures fines avec les CSS - 1 commentaire Donner une note à l'article (5)
  

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 et 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.