Contenu | Menu | Rechercher :
Le réseau des étudiants | Contact
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 :

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 :

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 :

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 :

la propeiété CSS border-style

Notez que :

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

Résumé de la syntaxe CSS des bordures

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

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

Cacher ce panneau   Accéder à la version étendue du chat

Cacher ce panneau