Bordures en CSS

| Pascale Lambert | Kerod |

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 : Commentez

- Titre : Bordures en CSS

- Auteurs : Pascale Lambert, Kerod

- Parution : 6 juillet 2010

- Mise à jour : 24 novembre 2010

- Licence : 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.

Sommaire

- I. Bordures en CSS

- I-A. Epaisseur des bordures

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

- I-C. Exemple de code CSS

- I-D. Applications

- I-E. Encadrer un élément

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

- I-G. Une seule bordure

- I-H. Bordures à coins arrondis

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 :

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

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

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

Ou :

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

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

Code CSS

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

<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

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

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

Code CSS

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

<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

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.