HTML & CSS pour débutants

HTML & CSS pour débutants (Partie 34) : Bordures

Toutes les vidéos du tutoriel HTML & CSS pour débutants

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 :

HTML & CSS pour les débutants (Partie 34): Cadre

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 :

HTML & CSS pour débutants (Partie 34) : Cadre

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:

HTML & CSS pour débutants (Partie 34) : Cadre

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:

HTML & CSS pour débutants (Partie 34): Bordure

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.

HTML & CSS pour débutants (Partie 34) : Cadre