En CSS, il existe deux types de bordures différents avec border
et outline
. Alors que border
signifie toujours une bordure rectangulaire, les bordures outline
introduites en CSS2 sont destinées aux zones non rectangulaires. Et il y a encore une autre différence : avec outline, le contour est dessiné à l'extérieur de la bordure, ce qui permet à un élément de recevoir à la fois une bordure avec border
et un contour avec outline
.
Les définitions de bordures présentées dans ce tutoriel sont particulièrement intéressantes pour les éléments qui forment leur propre paragraphe. En principe, elles peuvent bien sûr également être appliquées à d'autres éléments.
Définir des bordures
Avec border
, l'apparence de toute la bordure autour d'un élément peut être déterminée.
Avec la propriété border
générale, il s'agit d'une combinaison des valeurs suivantes, sur lesquelles nous reviendrons en détail :
• border-color
• border-style
• border-width
Les valeurs des différentes propriétés sont notées séparément par des espaces. L'ordre dans lequel les propriétés sont spécifiées n'a pas d'importance. De plus, pour border
, il existe également quatre sous-propriétés qui permettent de spécifier la couleur de la bordure, l'épaisseur de la bordure et le type de bordure pour les côtés individuels de l'élément.
• border-top
– bordure supérieure
• border-right
– bordure droite
• border-bottom
– bordure inférieure
• border-left
– bordure gauche
L'exemple suivant montre l'utilisation de border
. Cette définition crée une bordure de trois points de largeur, noire et continue.
<p style="border:3pt solid #000000;"> Bienvenue </p>
Le résultat dans le navigateur :
La couleur de la bordure
La couleur de la bordure est déterminée par border-color
. Les valeurs autorisées sont les suivantes :
• transparent
– bordure transparente
• Valeur de couleur
Si une seule valeur est donnée, elle s'applique à toutes les côtés de la bordure. Pour définir des couleurs différentes pour chaque côté, on spécifie plusieurs valeurs, séparées par des espaces.
• Deux valeurs – la première pour la couleur de bordure supérieure et inférieure, la deuxième pour la couleur de bordure gauche et droite.
• Trois valeurs – la première pour la couleur de bordure supérieure, la deuxième pour celle de la bordure gauche et droite, la troisième pour la couleur de bordure inférieure.
• Quatre valeurs – la première pour la bordure supérieure, la deuxième pour la bordure droite, la troisième pour la bordure inférieure et la quatrième pour la bordure gauche.
De même, les sous-propriétés suivantes de border
peuvent être utilisées :
• border-top-color
– couleur de la bordure supérieure
• border-right-color
– couleur de la bordure droite
• border-bottom-color
– couleur de la bordure inférieure
• border-left-color
– couleur de la bordure gauche
Un exemple :
<p style="border-color: #ffff00; border-width: 3px; border-style: solid; padding: 2px"> PSD-Tutorials.fr </p>
Et voici le résultat dans le navigateur :
Le type de ligne
Le type de ligne de la bordure peut être défini par border-style
. Voici une liste des variantes de bordure possibles :
• none
– bordure invisible
• dotted
– en pointillés
• dashed
– en traits
Aussi voici un exemple:
<p style="border-bottom-style: dashed;"> Bordure pointillée </p>
Et voici ce que cela donne dans le navigateur:
Définir la largeur de la bordure
Avec border-width
la largeur de la bordure est définie.
• Indication de longueur
• thin
– bordure mince
• medium
– bordure de force moyenne
• thick
– bordure épaisse
Si une seule valeur est indiquée, elle s'applique à toutes les faces de l'élément. Pour définir des épaisseurs de bordure différentes pour chaque côté, il y a deux possibilités. Dans le premier cas, on note plusieurs valeurs séparées par des espaces.
• Deux valeurs – la première pour le haut et le bas, la deuxième pour la marge gauche et droite.
• Trois valeurs – la première pour le haut, la deuxième pour la marge gauche et droite, la troisième pour le bas.
• Quatre valeurs – première valeur pour le haut, deuxième pour la droite, troisième pour le bas et quatrième pour la marge gauche.
Vous pouvez également utiliser les propriétés de sous-bordure suivantes:
• border-top-width
– épaisseur de bordure en haut
• border-right-width
– épaisseur de bordure à droite
• border-bottom-width
– épaisseur de bordure en bas
• border-left-width
– épaisseur de bordure à gauche
Un exemple:
<p style="border-width:2px;border-style: dotted;"> Bienvenue </p>
La couleur de bordure pour le contour
La propriété outline-color
définit la couleur de la bordure. La spécification est identique à border-color
.
• invert
– une couleur est inversée. Cette couleur est créée en inversant tous les bits d'une valeur couleur hexadécimale.
• Indication de couleur
Un exemple:
<p style="outline-width: medium; outline-style: solid; outline-color: blue;"> PSD-Tutorials.de </p>
Voici ce que cela donne dans le navigateur:
Le type de bordure pour le contour
La spécification outline-style
détermine le type de contour. Les mêmes valeurs que pour border-style
sont autorisées.
• none
– bordure invisible
• dotted
– en pointillé
• dashed
– en tirets
• solid
– continu
• double
– double
• groove
– ligne en 3D
• ridge
– ligne en 3D
• inset
– ligne en 3D
• outset
– ligne en 3D
Un exemple:
<p style="outline-style:solid;outline-width:2px; outline-color:red;"> PSD-Tutorials.de </p>
L'épaisseur de bordure pour le contour
La spécification outline-width
est identique à border-width
. C'est aussi par là que l'épaisseur de la bordure est définie. Pour créer une ligne de contour visible, on combine toujours outline-width
avec outline-style
.
• medium
– bordure de force moyenne
• thin
– bordure mince
• thick
– bordure épaisse
• Indication de longueur – détermine l'épaisseur de la bordure
Un exemple:
<p style="outline-width: thin;outline-style: solid; outline-color: red;"> Bienvenue </p>
Et comme pour la bordure, il existe également une propriété générale pour les cadres outline
.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>PSD-Tutorials.de</title> <style> p { border:red solid thick; outline:green dotted thick; } </style> </head> <body> <p>Bienvenue sur PSD-Tutorials.de!</p> </body> </html>
Cela regroupe ensuite les propriétés suivantes:
• outline-width
• outline-style
• outline-color
Le principe est alors identique à celui de la propriété générale border
.