Vous êtes ici : Le réseau social des étudiants ==> Les bordures en CSS

Les bordures en CSS

La deuxième composante du modèle de boîte CSS qui vient immédiatement après la propriété CSS padding s'appelle border. Le W3C a implémenté les bordures d'une façon très enrichie en spécifiant beaucoup des propriétés CSS qui permettent de contrôler les bordures d'une manière assez délicate.

Je vous recommande de bien rester éveillé pour ne pas se perdre dans tout ce tas de propriétés CSS, que vous allez apprendre dans le présent chapitre

Introduction aux propriétés CSS de bordures

Les propriétés CSS qu'on va voir dans ce chapitre, vont vous permettre de personnaliser l'aspect des bordures qui sont par défaut invisibles. L'avantage avec ces propriétés, c'est qu'elles peuvent être utilisées avec n'importe quel élément du corps qu'il soit de type en-line ou bloc. Vous pouvez même spécifier les bordures pour votre document en associant les propriétés CSS de bordures à la balise <body>. Malgré leur attrait irrésistible, vous ne devez pas en abuser trop, car trop de styles peuvent dénaturer la présentation de la page

Syntaxe CSS détaillée des propriétés de bordures

La syntaxe détaillée des propriétés CSS de bordures est très facile : vous mettez tout d'abord le nom de la propriété (border), suivi d'un trait d'union "-" puis la nature de la bordure (right, left, top, bottom), suivi d'un trait d'union, et enfin l'attribut qui sera spécifié pour la bordure (color, width, style). Voici un exemple :

Input :

.maBordure {
border-bottom-width: 2px;
border-top-width: 2px; 
border-left-width: 1px; 
border-right-width: 1px; 
border-bottom-style: dotted;
border-top-style: dotted; 
border-left-style: solid; 
border-right-style: solid;
border-bottom-color: green;
border-top-color: green; 
border-left-color: red; 
border-right-color: red;
}
Puis dans le corps
<p>Grâce aux <span class="maBordure">CSS</span> vous pouvez personnaliser vos bordures.</p>

Output :

Grâce aux CSS vous pouvez personnaliser vos bordures.

Vous devez connaître les valeurs initiales de chaque attribut (style, color et width) des propriétés CSS détaillées :

style : 'none', qui veut dire aucune bordure. Ceci dit que pour avoir une bordure visible, vous devez tout d'abord lui affecter un style autre que 'none' ;
color : si aucune couleur n'a été spécifiée, la bordure aura la valeur de la propriété de style color (couleur) ;
width : la constante 'medium' (moyen) qui correspond à 3 pixels.

Les valeurs possibles pour les trois variables style, width et color seront traitées au fil du chapitre.

Taille de la bordure (width)

Les trois syntaxes suivantes sont plus génériques par rapport à la syntaxe détaillée qu'on vient de voir ci-dessus.

Vous pouvez spécifier la taille de la bordure soit en attribuant une valeur numérique par exemple : 2px (pixel), 1mm (millimètre) ou 0.5cm (centimètre) ou en se servant des constantes suivantes :

thin : fine ;
medium : moyenne (3 pixels) ;
thick : épaisse.

Vous pouvez spécifier une seule largeur, 2, 3 ou 4. Mais sachez que le navigateur interprète différemment les valeurs en fonction de leur nombre :

quatre valeurs : elles seront reprises par le navigateur dans le sens des aiguilles en partant du haut (haut, droite, bas, gauche). Ceci dit que la première valeur correspondra à largeur de la bordure supérieur, la deuxième à la largeur de la bordure droite et ainsi de suite ;
trois valeurs : la première correspondra à la largeur de la bordure supérieure, la deuxième portera sur la bordure gauche et droite, enfin la troisième va se rapporter à la bordure inférieure ;
deux valeurs : la première correspondra à la largeur des deux bordures haut et bas, la deuxième valeur va définir la largeur des deux autres bordures gauche et droite ;
une seule valeur : elle va correspondre à la largeur des quatre bordures.

Voici un exemple :

h1 {
border-width: thin 4px; /* largeur fine pour les deux bordures 'haut' et 'bas',
et bordures de largeur 4 pixels à gauche et à droite*/
}

Couleur de la bordure (color)

Je vais pas m'attarder là-dessus, mais sachez au moins que vous pouvez spécifier la couleur soit par son nom anglais, le code RGB ou le code hexadécimal.

h1 {
border-color: red #00FF00; /* les deux bordures supérieure et inférieure auront
une couleur rouge, les deux autres bordures gauche et droite auront une couleur verte */
}

Là aussi, vous pouvez spécifier soit une seule valeur, 2, 3 ou 4 valeurs.

Style de la bordure (style).......

Les mentions possibles sont :

none ou hidden : elles ont le même effet à savoir une bordure transparente (absence de bordure) ;
solid : bordure pleine ;
dotted : bordure sous forme de pointillés ;
dashed : bordure sous forme de tirets ;
double : bordure double (deux traits). La somme de la largeur des deux bordures et l'espace les séparant équivaut à la valeur de 'border-width' ;
ridge : bordure dotée d'un effet 3 dimensions ;
groove : bordure en relief ;
inset : bordure entrante ;
outset : bordure sortante.

la propeiété CSS border-style

Notez que :

pour que les styles : groove, ridge, outset, inset apparaissent bien, évitez de mettre une couleur noire à vos bordures, sinon elles auront une apparence remplie (solid) ;
vous pouvez vous contenter de la notation "border-style: solid;". Lorsque vous spécifiez à la propriété "border-style" (ou la propriété générique border) uniquement le style de la bordure, le navigateur applique la même couleur du texte que celle de l'élément à la bordure et une taille "border-width: medium;" qui correspond à 3 pixels.

Supprimer la bordure des images par la propriété CSS border-style

L'une des applications les plus appréciables de la valeur "none" est de supprimer la bordure qui apparaît par défaut sur les images cliquables :

a img {  /* toutes les images comprises dans un lien */
border-style: none; /* on pourra solliciter le même effet avec la propriété CSS
border-width, en lui spécifiant une largeur nulle : 0px */
}

Contrairement à la propriété CSS border-width, les deux propriétés CSS border-color et border-style ont des valeurs initiales :

la valeur initiale de la propriété CSS border-color et la valeur de la propriété CSS color (formatage de texte) ;
la valeur initiale de la propriété CSS border-style est : 'none' qui veut dire pas de bordure.

La syntaxe : border-top, border-left, border-bottom et border-right

Une autre syntaxe permet de fixer la nature de la bordure (left, right, bottom, top) et puis de jouer sur les variables couleur, style et largeur. lorsqu'une mention fait défaut. Elle sera remplacée par sa valeur initiale :

h1 {
border-bottom: double green; /* bordure inférieur double et de couleur verte */
}

La propriété générique border

La méga-propriété border permet de donner la même valeur d'épaisseur, de couleur et de style aux quatre bordures d'un élément. Exemple :

h1 {
border: solid green 2px;
}
équivaut à 
h1 {
border-top: solid green 2px;
border-right: solid green 2px;
border-bottom: solid green 2px;
border-left: solid green 2px;
}
ou bien
h1 {
border-style: solid;
border-color: green;
border-width: 2px;
}

Remarques :

au même titre que les propriétés génériques. Les valeurs passées sont séparées par des espaces. En plus l'ordre n'a pas d'importance. En fait le navigateur peut identifier facilement les propriétés CSS rien qu'avec les valeurs passées ;
les propriétés CSS dont aucune valeur n'apparaît prennent leurs valeurs initiales (valeur par défaut). A titre d'exemple si vous omettez la mention de couleur (color) et de la largeur (width). Le navigateur va appliquer à la bordure la couleur du texte et une largeur moyenne (medium).

Au secours ma bordure ne s'affiche pas !

Beaucoup de gens se lamentent : j'ai beau passer les propriétés CSS border, je ne vois aucune trace de bordures. Dans la majorité des cas ce problème est imputable à la non spécification d'un style à la bordure. Donc n'oubliez ça, c'est trop important.

En fait tous les éléments XHTML (à part les images cliquables et les séparateurs <hr>) s'affichent sans bordure, du fait que la valeur initiale du style de la bordure est 'none'. Grosso modo, les cas pour lesquels la bordure ne s'affiche pas peuvent se résumer en ce qui suit :

aucun style de bordure (autre que 'none' ou hidden') n'a été spécifié ;
une largeur de bordure nulle '0px'. A moins que vous ne spécifier une largeur nulle à votre bordure, elle apparaîtra, car la valeur par défaut est 'medium' ;
la couleur de la bordure et la même que celle de la couleur du fond. Donc la bordure existe réellement mais elle confondue avec la couleur de l'arrière-plan.

Résumé de la syntaxe CSS des bordures

Pour signaler une propriété "border" vous avez droit à quatre notations possibles :

la notation la plus personnalisée : border-[top_left_right_bottom]-[style_color_width]. Cette écriture précise la bordure qui sera modifiée (supérieure, gauche, droite, inférieure) et l'effet qui sera appliqué (style, couleur, taille). cette mention ne peut recevoir qu'une seule valeur :

h1 {
border-top-width: 2px;
border-right-width: 4px;
border-bottom-width: 2px; 
border-left-width: 4px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid; 
border-left-style: solid;
border-top-color: red;
border-right-color: blue;
border-bottom-color: red; 
border-left-color: blue;
}

la notation : border-[style_color_width]. Cette mention peut recevoir de 1 à 4 valeurs de même nature (soit pour la couleur, la taille ou le style de la bordure). Le code CSS introduit en haut peut-être résumé sans perte d'informations par :
```
h1{
border-width: 2px 4px;
border-style: solid;
border-color: red blue;
}
```
la syntaxe du genre : border-[top_right_bottom_left]. Elle peut recevoir trois mentions de nature différente : la couleur, le style et la largeur. Si une mention fait défaut, elle sera remplacée par la valeur initiale. Les trois valeurs définies vont concerner une seule bordure.
la méga-propriété (border). Elle peut recevoir de 1 à 3 valeurs de nature différente (ont peut pas avoir deux valeurs de même nature par exemple 2px 4px), mais dans ce cas les valeurs mentionnées seront appliquées aux quatre bordures :
border: solid /* on aura quatre bordures remplies */
border: solid green; /* les quatre bordures auront un style double et une couleur verte */
border: 3px red solide; /* les quatre bordures auront une taille de 3 pixels, une couleur rouge et un style rempli */

Illustration des quatre notations

la propriété CSS border

Dans le chapitre on va aborder le dernier élément du modèle des boîtes CSS : la propriété CSS margin (marge).

Espace membre