CSS Border : Comment Créer des Bordures en CSS ?

Besoin d’ajouter une bordure à un élément en CSS ? C’est une des bases, mais il y a quelques détails à connaître.

Ce guide vous explique comment utiliser la propriété `border` avec des exemples de code simples à copier-coller.

Exemples de la propriété `border` en action

Pour comprendre rapidement, le plus simple est de voir directement le code. La propriété `border` peut s’utiliser de plusieurs manières.

Voici quelques exemples courants pour vous faire une idée :

border: solid;
border: dashed red;
border: 1rem solid;
border: thick double #32a1ce;
border: 4mm ridge rgb(211 220 50 / 0.6);

Chaque ligne définit une bordure différente :

border: solid; : Crée une bordure simple et pleine. La couleur sera celle du texte et l’épaisseur sera moyenne par défaut.
border: dashed red; : Affiche une bordure en tirets de couleur rouge.
border: 1rem solid; : Définit une bordure pleine de 1rem d’épaisseur.
border: thick double #32a1ce; : Applique une bordure double, épaisse et d’une couleur bleue spécifique.
border: 4mm ridge rgb(211 220 50 / 0.6); : Produit une bordure avec un effet 3D en relief (ridge) de 4mm.

Comprendre la syntaxe de `border`

La propriété `border` est ce qu’on appelle une **propriété raccourcie** (shorthand). C’est un moyen rapide de définir plusieurs propriétés en une seule ligne.

Elle regroupe trois aspects de la bordure :

border-width : l’épaisseur.
border-style : le style (plein, tirets, etc.).
border-color : la couleur.

Vous pouvez fournir une, deux ou trois de ces valeurs. L’ordre n’a pas d’importance. Mais attention, si `border-style` n’est pas défini, la bordure n’apparaîtra pas, car sa valeur par défaut est `none`.

Voici comment les combinaisons fonctionnent :

/* style */
border: solid;

/* largeur | style */
border: 2px dotted;

/* style | couleur */
border: outset #ff3333;

/* largeur | style | couleur */
border: medium dashed green;

Les 3 propriétés qui composent une bordure CSS

Pour bien maîtriser les bordures, il faut connaître les valeurs possibles pour chaque sous-propriété.

L’épaisseur de la bordure : `border-width`

Pour définir la largeur, vous avez deux options : utiliser des mots-clés ou des unités de longueur précises.

Mots-clés : thin (fin), medium (moyen, la valeur par défaut), et thick (épais).
Unités de longueur : N’importe quelle unité CSS valide fonctionne, comme `px`, `rem`, `em` ou `mm`. C’est la méthode la plus courante pour un contrôle précis.

Le style de la bordure : `border-style`

C’est la propriété la plus importante, car sans elle, rien ne s’affiche. Le style par défaut est `none`.

Voici la liste des styles disponibles :

dotted : une bordure en pointillés.
dashed : une bordure en tirets.
solid : une bordure pleine et continue. C’est le style le plus utilisé.
double : une bordure composée de deux lignes pleines.
groove : un effet 3D qui donne l’impression que la bordure est gravée en creux.
ridge : l’inverse de `groove`, un effet 3D qui donne l’impression que la bordure est en relief.
inset : un effet 3D qui donne l’impression que l’élément est incrusté dans la page.
outset : l’inverse de `inset`, l’élément semble sortir de la page.
none : aucune bordure. C’est la valeur par défaut.
hidden : identique à `none`, mais utile dans les tableaux pour résoudre des conflits de bordures.

Note sur les styles 3D : L’effet visuel des styles `groove`, `ridge`, `inset` et `outset` dépend de la `border-color`. Les ombres et lumières qui créent l’effet 3D sont calculées à partir de cette couleur.

Les combinaisons les plus fréquentes sont : `dotted dashed`, `dashed solid`, `solid double`, `double groove`, `groove ridge`, `ridge inset`, et `inset outset`.

La couleur de la bordure : `border-color`

Vous pouvez utiliser n’importe quelle valeur de couleur valide en CSS.

Noms de couleur : red, blue, green, etc.
Codes hexadécimaux : #ff3333, #32a1ce.
Fonctions RGB/RGBA : rgb(211 220 50 / 0.6).

Point important : si vous ne spécifiez pas de couleur, la bordure prendra par défaut la valeur `currentColor`. Cela signifie qu’elle aura la même couleur que le texte (`color`) de l’élément.

Exemple d’application concret

Mettons tout ça en pratique. Imaginez que vous ayez un simple `div` dans votre page HTML.

<div>
  J’ai une bordure, un contour et une ombre portée ! Incroyable, n’est-ce pas ?
</div>

Maintenant, appliquons un peu de style pour voir l’effet de `border` combiné à d’autres propriétés.

div {
  border: 0.5rem outset pink;
  outline: 0.5rem solid khaki;
  box-shadow: 0 0 0 2rem skyblue;
  border-radius: 12px;
  font: bold 1rem sans-serif;
  margin: 2rem;
  padding: 1rem;
  outline-offset: 0.5rem;
}

Le résultat est une boîte avec une bordure rose en relief (`outset`), un contour kaki et une ombre portée bleue. Cet exemple montre comment `border` s’intègre avec d’autres styles pour créer des designs plus complexes.

Concepts avancés et propriétés associées

La propriété `border` est simple, mais l’écosystème CSS autour des bordures est plus large. Voici quelques notions utiles.

Différences entre `border` et `outline`

On confond souvent la bordure (`border`) et le contour (`outline`). Ils se ressemblent mais ont des différences clés :

L’outline ne prend pas de place. Ajouter un `outline` ne décalera pas les autres éléments de la page, alors qu’une `border` oui.
L’outline est dessiné par-dessus l’élément, à l’extérieur.
L’outline n’est pas obligé d’être rectangulaire.

Gérer les bordures de chaque côté

La propriété `border` applique le même style à tous les côtés. Si vous voulez des bordures différentes pour chaque côté, vous devez utiliser des propriétés plus spécifiques.

Par exemple :

border-top : pour la bordure du haut.
border-right-color : pour la couleur de la bordure droite.
border-bottom-style : pour le style de la bordure du bas.
border-left-width : pour l’épaisseur de la bordure gauche.

Les valeurs globales

Comme beaucoup de propriétés CSS, `border` accepte des valeurs globales qui modifient son comportement par rapport à l’héritage.

inherit : L’élément hérite des propriétés de bordure de son parent.
initial : Réinitialise la bordure à sa valeur par défaut du navigateur.
revert : Annule le style appliqué pour revenir au style précédent.
revert-layer : Utile avec les `@layer` pour annuler les styles d’une couche.
unset : Agit comme `inherit` si la propriété est héritée, sinon comme `initial`.

Par exemple, les combinaisons `inherit initial revert revert` ou `initial revert revert layer` et `revert revert layer unset` permettent des contrôles fins sur la cascade des styles.

Définition technique de la propriété `border`

Pour les plus techniques, voici un résumé des caractéristiques formelles de la propriété `border`, comme on les trouve dans la documentation.

Valeur initiale : la largeur est `medium`, le style est `none`, la couleur est `currentColor`. Il n’y a donc pas de bordure visible par défaut.
S’applique à : tous les éléments, ainsi qu’au pseudo-élément `::first-letter`.
Héritée : non. Un `div` ne transmet pas sa bordure à ses paragraphes enfants.
Type d’animation : la largeur (`border-width`) et la couleur (`border-color`) sont animables. En revanche, le style (`border-style`) ne l’est pas, son changement est instantané (discret).

Ces détails techniques sont issus de la spécification officielle CSS `backgrounds and borders module level 3`.