Accédez à nos cours concernant des domaines et thématiques différentes. Vous pouvez aussi contribuer en rédigeant des articles.
Consulter les coursParcourez notre annuaire d’écoles, instituts et universités du monde. Si votre école n’est pas listée, vous pouvez l’ajouter très facilement.
Consulter les écolesAccédez à notre messagerie instantanée pour échanger avec d’autres membres inscrits et aussi les invités. Aucune inscription n’est obligatoire.
Accéder au tchatLa 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 
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 
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.
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*/
}
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.
Les mentions possibles sont :
Notez que :
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 :
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 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 :
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 :
Pour signaler une propriété "border" vous avez droit à quatre notations possibles :
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;
}
h1{
border-width: 2px 4px;
border-style: solid;
border-color: red blue;
}
Dans le chapitre on va aborder le dernier élément du modèle des boîtes CSS : la propriété CSS margin (marge).