Styles Côtés Épaisseurs Couleurs Applications

Bordures, arrière-plans et images

Dans un document web graphique, la prise en compte de l'environnement des éléments (bordures, arrière-plans et image de fond) constitue la dernière étape majeure avant de passer aux positionnements d'objet CSS.

Mettre en forme les bordures

CSS permet d'entourer très simplement les divers éléments de type bloc d'une page web par des bordures aux caractéristiques (style, épaisseur, couleurs) libres.

Cette possibilité est également offerte aux éléments en ligne remplacés (voir « Contenus autorisés selon le type de balises »), qui possèdent des dimensions par défaut (hauteur et largeur), la balise <img> par exemple.

Les différents styles de bordures

La propriété border-style met en place le type des bordures d'un élément :

• none : pas de bordure ; équivaut à border-width: 0 ;
• dashed : tirets ;
• dotted : pointillés ;
• double : deux traits pleins (d'épaisseur égale ou différente en fonction du navigateur) ;
• inset : effet entrant, élément incrusté dans la page (opposé d'outset) ;
• outset :effet sortant, élément extrudé de la page (opposé d'inset) ;
• solid : trait plein.
• groove : effet 3D gravé dans la page, opposé de ridge ;
• ridge : effet 3D sortant de la page, opposé de groove ;
• hidden : pas de bordure mais influe sur la bordure mitoyenne ;

Construction d'exemples sur l'élément de type bloc paragraphe <p>
(notez la largeur du paragraphe définit par l'attribut « width: 30em »)
On constate que tous les navigateurs ne reconnaissent pas les dix styles de bordures possibles :

0) none : pas de bordure ; équivaut à border-width: 0

1) dashed : tirets

2) dotted : pointillés

3) double : deux traits pleins

4) inset : effet entrant, élément incrusté dans la page

5) outset : effet sortant, élément extrudé de la page

6) solid : trait plein

7) groove : effet 3D gravé dans la page

8) ridge : effet 3D sortant de la page, opposé de groove

9) hidden : pas de bordure mais influe sur la bordure mitoyenne

Chacun des quatre côtés d'un élément peut aussi être représenté différemment.

Pour cela, on précise à la suite plusieurs valeurs de border-style, dont l'interprétation dépendra de leur nombre.

• Exemple deux valeurs - border-style: solid dotted ;

2 valeurs sont respectivement affectées aux côtés horizontaux et verticaux du cadre.

• Exemple trois valeurs - border-style: solid double dotted ;

3 valeurs concernent tour à tour le haut, les côtés verticaux, et le bas.

• Exemple quatre valeurs - border-style: solid double dotted ridge.

4 valeurs décriront les styles des quatre côtés en tournant dans le sens horaire haut, droit, bas, et gauche.

Il existe aussi une autre possibilité ; les propriétés :

• border-top-style (haut),
• border-right-style (droit),
• border-bottom-style (bas) et
• border-left-style (gauche) s'appliqueront directement au style de bordure d'un côté.

L'épaisseur des bordures

La propriété border-width définit l'épaisseur des bordures, et n'a de sens qu'en accompagnement d'un style (border-style) ou d'une couleur de bordure (border-color). Certains navigateurs n'interprètent d'ailleurs que les bordures ayant renseigné ces deux propriétés.

On peut préciser les épaisseurs de plusieurs manières (l'interprétation des trois premières dépend du navigateur) :

• thin : bordune fine ;
• medium : bordure moyenne ;
• thick : bordure épaisse
• avec une mention numérique de longueur reprenant la syntaxe habituelle.

La syntaxe des mentions de longueur est exposée sur la page portant sur les « Unités de taille des polices de caractères ».
Fournir plusieurs valeurs permettra de représenter différemment les quatres cotés de l'élément.

Voici trois exemples :

• 2 valeurs portent sur les côtés horizontaux puis verticaux.

border-width: thin 0.5em;
border-style: outset; width: 25em;

• 3 valeurs représentent le haut, les côtés latéraux et le bas.

border-width: thin medium 0.5em;
border-style: outset; width: 25em;

• 4 valeurs définissent les cotés en partant du haut et en tournant dans sens horaire.

border-width: thin medium 1em 2em; border-style: groove; width: 23em; border-color:#005FA9"

On peut ici encore définir directement l'épaisseur de chaque côté avec les propriétés border-top-width, border-right-width, border-bottom-width, border-left-width.

La couleur des bordures

Elle est mise en place par la propriété border-color, qui ne s'applique qu'en complément d'un style (border-style) ou d'une épaisseur de bordure (border-width). Sans cela, la bordure est inexistante.
Rappel « Notation des couleurs ».

border-width: 6px 6px; border-style: solid;
border-color: blue green red

Notation raccourcie

La propriété générale border rassemble tous ces aspects en une seule instruction.

Pour obtenir une bordure en pointillés gris large de trois pixels, il suffit d'écrire :

border: 3px dotted gray;

Cela allège agréablement les spécification distinctes :

border-width:3px;
border-style:dotted;
border-color:gray;

Résultat :
bordure en pointillés gris large de trois pixels

Applications pratiques

1) Supprimer la bordure d'une image

Vous êtes familier des images cliquables (voir partie « Introduction HTML »
Exercice n°3 : image liée), notamment utiles dans les boutons graphiques.

Voici l 'approche initiale et naturelle :

<a href="page.htm"><img alt="" src="francheComte.jpg" /></a>

en HTML, on peut résoudre le problème en précisant l'attribut border="0" :

<a href="page.htm"><img alt="" src="francheComte.jpg" border="0" /></a>

Il convient pourtant, nous l'avons vu, de déporter les propriétés de mise en forme (telles que les détails de bordures) vers les styles CSS.
Le style suivant supprime la bordure de toutes les images du document :

img {
border-width: 0;
border-style:none;
}

En notation raccourcie :

img { border:0 none;}

De la même manière, on n'opérera que les bordures des images contenues dans un lien en écrivant la déclaration :

a img { border:0 none;}

Celle-ci relevant du sélecteur a img, elle ne concernera que les liens <a> renfermant des images <img>, et ceci à n'importe quel niveau de profondeur.

2) Afficher un trait vertical

Pour une utilisation astucieuse des bordures, on peut encore mettre en place une ligne verticale dans un document.
L'élément <hr /> (horizontal rule) est un séparateur qui trace un trait horizontal ; c'est une balise auto-fermante et s'écrit en terminant par /> .

Exemple HTML de trait horizontal par la balise <hr align="center" width="50%" />
dotée d'attributs d'alignement et de largeur :

L'absence d'élément HTML décrivant une ligne verticale incite souvent les designers à recourir à diverses « bidouilles » pour les créer. Les plus courantes impliquent l'ajout de colonnes de tableau <table> ou de bloc <div> verticaux et positionnés.
Dans la plupart des cas, ces complications sont inutiles, et une simple bordure à droite ou à gauche de l'élément fait l'affaire.

Pour créer un paragraphe de texte clairement séparé du reste du contenu par un trait vertical, on pourra ainsi écrire :

CSS
.bordure {
width: 10em;
border-right: 1px solid gray;
}

HTML
<p class="bordure">test de paragraphe pour montrer que ce paragraphe sera séparé visuellement du reste de la page à l'aide d'un trait verticale à sa droite.</p>

Cette méthode convient aussi pour marquer une séparation entre un menu et le contenu de la page.

Résultat

test de paragraphe pour montrer que ce paragraphe sera séparé visuellement du reste de la page à l'aide d'un trait verticale à sa droite.

3) Afficher un trait vertical

SolutionCSS

Auto-entrepreneur.
Access®, Excel®, Powerpoint®, Word® & Windows® sont des produits et marques déposés
propriété de Microsoft, Inc.
Photoshop® & Dreamweaver ® sont des produits et marques déposés propriété de Adobe System.

Dernière mise à jour le 12.08.2011