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.
