Fiche CSS : Bordures

Objet de la fiche :

État de la fiche Terminée validée


Plan de la fiche

Avant propos

Les bordures sont des éléments très importants pour la présentation de vos pages HTML. Toutefois attention à ne pas transformer votre page en arbre de noël, c'est très désagréable pour les visiteurs.

Les bordures classiques

Les propriétés suivantes appliquent une bordure à tous ou à chaque contours d'un contenant (haut, bas, gauche et droite). Les attributs border sont applicables sur l'ensemble des balises HTML ou XHTML.

Attributs généraux

La propriété border-width
Propriété Valeurs Commentaires Exemples
border-width

Épaisseur  bordure
border-width:05em		 Valeur prédéfinie "thin" Fin

Bonjour
Valeur prédéfinie "medium" Moyen

Bonjour
Valeur prédéfinie "thick" Gros

Bonjour
Valeur numérique en pixel, % ou en em  

Bonjour cadre avec 1em
La propriété border-color
Propriétés Valeurs Exemples
border-color

Couleur  bordure
border-color:red		 valeurs hexa, rgb ou nom de couleur

Bonjour

La propriété border-style
Propriétés Valeurs Commentaires Exemples
border-style

Style de la bordure
Exemple :
border-style:dotted
Le style ne peut être appliqué que si l’épaisseur de bordure (border-width) a été définie (différente de none), sans quoi la bordure est inexistante.		 dotted Pointillés

Bonjour
groove Effet gravée avec forme d'une rainure

Bonjour
ridge Effet 3D opposé de groove

Bonjour
inset

Bonjour
outset

Bonjour
dashed Tirés

Bonjour
solid Trait plein

Bonjour
double Trait double

Bonjour
none Valeur par défaut

Aucune bordure
hidden   Même effet que la valeur none. Pas de bordure, influe sur la bordure mitoyenne dans le cas de tableaux.
La propriété générique border
Attribut Valeurs Exemples
border

Concentration des propriétés 'raccourci' dans une seule propriété.		 Exemple : border: solid 0.2em #c0c0c0

Bonjour

 

CSS et Bordures

Syntaxe générale des feuilles de style

Pour les feuilles de style internes ou externes

<style type="text/css">
   p {border-style:solid;
       border-width:1px;
       border-color:black }
</style>

Pour les feuilles de style en ligne

style="border-style:solid;  border-width:1px;  border-color:black" 

Syntaxe réduite des feuilles de style

Comme pour beaucoup de propriétés, on peut concentrer plusieurs propriétés en une seule avec l'attribut border.

Pour les feuilles de style internes ou externes

<style type="text/css">
   p {border:solid 1px black }
</style>

Pour les feuilles de style en ligne

style="border: solid 1px black" 

Les bordures individuelles

Propriétés s'appliquant individuellement aux bordures : Méthode 1

Il s'agit des mêmes attributs que précédemment (border-style, border-width et border-color) auxquels on affecte non plus une seule valeur mais plusieurs suivant les recommandations suivantes :

Nombre de valeurs Cotés concernés Exemples de syntaxe Résultats
Une Les quatre cotés    
Deux la première valeur s'applique aux côtés haut et bas de la bordure et la seconde aux côtés gauche et droit. border-width: 2px 5px

bonjour
Trois la première s'applique au côté haut de la bordure, la deuxième aux côtés gauche et droit et la troisième au côté bas. border-color:blue red yellow

bonjour
Quatre la première s'applique au côté haut de la bordure, la deuxième au côté droit, la troisième au côté bas et la quatrième au côté gauche. border-style:dotted solid dashed double

bonjour

Propriétés s'appliquant individuellement aux bordures : Méthode 2

Pour le style des bordures

Propriétés Valeurs Exemple
border-top-style
Style de la bordure haute
  • dotted
  • groove
  • ridge
  • inset
  • outset
  • dashed
  • solid
  • double
  • none
  • hidden
 <style type="text/css">
   p {border-top-style:dotted;
       border-right-style:solid;
       border-bottom-style:dashed;
       border-left-style:double }
</style>

Bonjour
border-right-style
Style de la bordure droite
border-bottom-style
Style de la bordure basse
border-left-style
Style de la bordure gauche

Pour l'épaisseur des bordures


Propriétés Valeurs Exemple
border-top-width
Épaisseur de la bordure haute		 Valeurs prédéfinies
  •  "thin"
  • "medium"
  •  "thick"

Valeurs numériques

  • pixel
  • em
 <style type="text/css">
   p {border-top-width:0.5em;
       border-right-width:5px;
       border-bottom-width:medium;
       border-left-width:1em }
</style>

Bonjour
border-right-width
Épaisseur de la bordure droite
border-bottom-width
Épaisseur de la bordure basse
border-left-width
Épaisseur de la bordure gauche

Pour la couleur des bordures


Propriétés Valeurs Exemple
border-top-color
Couleur de la bordure haute
  • Nom de la couleur
  • Valeurs hexa
  • Valeurs rgb
 <style type="text/css">
   p {border-top-color:black;
       border-right-color:red;
       border-bottom-color:yellow;
       border-left-color:gray }
</style>

Bonjour
border-right-color
Couleur de la bordure droite
border-bottom-color
Couleur de la bordure basse
border-left-color
Couleur de la bordure gauche

Exemples

Les différentes combinaisons par l'exemple

En utilisant les différentes possibilités proposées ci dessous retrouvez le résultat et la feuille de style associée aux différentes combinaisons.

Sélection de la bordure border-style

Résultats obtenus en fonctions des sélections
Bordure avec <p>....</p>

border-width border-color

Déclarations de style correspondantes
Déclaration de style interne Déclaration feuille de style interne sous forme réduite
<style type="text/css">
   p {border-style:solid;
       border-width:0.5em;
       border-color:black }
</style>
<style type="text/css">
  p {solid 0.5em black}
</style>

Exemples d'application de bordures sur différentes balises

Ces quelques exemples ont pour but de montrer que l'on peut appliquer des bordures sur n'importe quel type de balise.

Balises Styles en ligne utilisés Résultats
<b> <p>Bonjour<b style =  "border:solid 5px red"> ou </b>allez vous</p>

Bonjour ou allez vous
<abbr> (acronyme) <p>Voici un acronyme<abbr   title="Agence nationale pour l'emploi">A.N.P.E.</abbr>trés connu</p>

Voici un acronyme A.N.P.E. très connu
<img> <img style = "border:solid 0.5em  yellow" src="Images/Logo_BorduresMarges.jpg" width="32" height="26" alt="" /> sans bordure        avec bordure
<input> <input style = "border:solid medium gray" type="text" size="10" /> sans bordure avec bordure
<ul> <ul style = "border:solid medium  black"> <li>Art1</li><li>Art2</li><li>Art3</li></ul>
  • Art1
  • Art2
  • Art3
<li> <ul style ="border:solid medium color black"><li>Art1</li><li style = "border:solid medium  blue">Art2</li><li>Art3</li></ul>
  • Art1
  • Art2
  • Art3

Les bordures de tableaux et cellules

Les mêmes attributs décrits précédemment s'appliquent aux définitions des bordures du tableau lui même et aussi aux cellules qui le composent. Deux attributs supplémentaires sont à notre disposition pour jouer sur la disposition des cellules : border-collapse, border-spacing.

Exemple de tableau et ses cellules de base sans style de bordures. Exemple de tableau et ses cellules de base avec style de bordures.
Résultats
MonTableau
Cel1 Cel2
Cel3 Cel4
MonTableau
Cel1 Cel2
Cel3 Cel4
Codes

Propriété border-collapse

Le rendu des bordures de tableau est divisé en deux catégorie dans CSS2 - fusionnées et séparées. Cet attribut définit lequel des deux modèles de rendu doit être utilisé. Dans le modèle de rendu des bordures fusionnées, les cellules adjacentes partagent les mêmes bordures. Dans le modèle de rendu des bordures séparées, chaque cellule adjacente a ses propres bordures.

Border-collapse est une propriété de la balise <table> donc le rendu s'applique à toutes les cellules du tableau.

Cette propriété peut prendre les valeurs suivantes :

  • collapse, chaque cellule a une bordure commune (valeur par défaut).
  • separate, chaque cellule a sa propre bordure.
  • inherit, hérite de son parent (css 2).

Pour bien visualiser la différence entre collapse et separate nous allons utiliser un couleur commune (verte) et une épaisseur  commune 0.1em pour toutes les bordures des cellules.

Tableau de départ avec border-collapse:separate
Tableau avec border-collapse:collapse

Propriété border-spacing

Ne fonctionne pas sur tous les navigateurs.

border-spacing définit la distance entre les bordures des cellules adjacentes uniquement  lorsque l'attribut border-collapse est définie à separate.  La distance peut être exprimée sous forme numérique en pixels, % ou em ou prendre la valeur inherit  si on désire que l'élément hérite des propriété de son parent.

Border-spacing est une propriété de la balise <table> donc le rendu s'applique à toutes les cellules du tableau.

Syntaxe générale border-spacing:valeur1 valeur2

  • Si une seule valeur (border-spacing:valeur1) est présente, l'espacement s'applique à la fois sur l'espacement horizontal et vertical.
  • Si les deux valeurs sont spécifiées (border-spacing:valeur1 valeur2), la première donne l'espacement vertical et la seconde l'espacement horizontal.

Tableau de départ sans border-spacing Tableau obtenu avec border-spacing:1em si votre navigateur le permet.

Autre exemple avec border-spacing:1em 0.3em


Propriété empty-cells

empty-cells permet de définir ou non  les bordures dans le cas des cellules vides.

C'est une propriété de la balise <table> donc le rendu s'applique à toutes les cellules du tableau.

Syntaxe générale empty-cells:valeur

Les valeurs suivantes sont permises:

  • show = Les bordures de cellule des cellules vides sont affichées.
  • collapse = L'affichage des bordures de cellules vides est empêché (réglage par défaut).
Voici un tableau sans valeur déclarée pour empty-cells et une cellule vide(cellule4) Voici le même tableau avec valeur déclarée pour empty-cells:show. La cellule 4 bien que vide conserve la bordure.

Application au projet de site web

Les styles seront appliqués à partir dans la feuille de style externe CSSExterneScreen.css

  • Affectez une bordure aux diverses images , et modifiez la couleur de la bordure des images lorsque la souris les survole.

La couleur des cadre sera verte (solide, fine et verte) et la couleur des cadres survolés d'un vert plus clair (#00CC00).

Bordure des images Bordures au survol
  • Affectez une bordure aux éléments de la liste "BoiteChoix" . Uniquement pour la bordure gauche.

La couleur de la bordure de l'élément sera verte (solide, fine et verte) et la couleur de l'élément survolés d'un vert plus clair (#00CC00).

 

  • Toujours dans la feuille de style externe initialisez les bordures des tableaux contenant des images de façon à ce qu'elles ne puissent apparaître : pour cela utilisez hidden.

Retrouvez la solution


Respectons la propriété intellectuelle