Bordures et ombres en CSS : border, border-radius et box-shadow

Par Sam Accolade · Publié le 19 décembre 2017 · Mis à jour le 11 août 2026

Pour continuer sur les effets de style en CSS, il est logique, après avoir vu les couleurs, le fond et la transparence, d’étudier les propriétés de bordures et d’ombres. Ce sont des propriétés qui peuvent aussi bien s’appliquer sur le texte que sur les blocs qui constituent notre page Web. Si vous n’avez pas encore vu les propriétés de couleur, je vous recommande de lire d’abord le cours sur les couleurs et le fond en CSS.

Une précision avant de commencer : j’ai entièrement retesté les exemples de ce cours pendant sa mise à jour, dans un vrai navigateur (Chrome). Quand je vous annonce une valeur ou un comportement, il a été mesuré, pas supposé.

Les bordures

Le CSS propose une large palette de propriétés pour personnaliser les bordures : border-width pour l’épaisseur, border-color pour la couleur, border-style pour le type de trait.

Comme pour le fond, il existe une propriété raccourcie qui regroupe ces trois réglages en une seule ligne : border. On lui indique, séparées par des espaces :

l’épaisseur : de préférence en pixels ;
le style de trait : le CSS offre un large choix (liste ci-dessous) ;
la couleur : avec la notation de votre choix (mot-clé, hexadécimal, rgb...).

Voici les valeurs possibles pour le style de trait :

none : valeur par défaut, pas de bordure ;
solid : trait simple ;
double : trait double ;
dotted : pointillés ;
dashed : tirets ;
groove : trait en relief ;
ridge : un autre trait en relief ;
inset : effet 3D enfoncé ;
outset : effet 3D surélevé.

Par exemple, pour obtenir une bordure verte en trait double avec une épaisseur de 5 pixels sur un paragraphe :

p {
  border: 5px double green;
}

En inspectant ce paragraphe dans Chrome pendant la rédaction, le navigateur me confirme bien les trois valeurs calculées : épaisseur 5px, style double, couleur rgb(0, 128, 0) (le vert du mot-clé green). L’ordre des valeurs dans le raccourci est d’ailleurs libre : border: green 5px double; fonctionne aussi.

Bordures de côté

Pour encore plus de style, vous pouvez appliquer des propriétés différentes à chacune de vos bordures ! Au lieu d’utiliser la propriété générale border qui s’applique aux 4 côtés, il suffit d’utiliser la propriété du côté concerné :

border-top pour la bordure du haut ;
border-bottom pour la bordure du bas ;
border-left pour la bordure de gauche ;
border-right pour la bordure de droite.

Ce sont aussi des propriétés raccourcies, auxquelles vous pouvez donner une épaisseur, un style de trait et une couleur.

Vous pouvez enfin combiner côté et réglage précis : par exemple border-bottom-color pour changer uniquement la couleur de la bordure du bas. La propriété spécifique prend le dessus sur la propriété générale, à condition d’être écrite après elle. Ainsi, pour une bordure de 20 pixels, verte, en trait double, mais avec le bas en bleu :

p {
  border: 20px double green;
  border-bottom-color: blue;
}

Vérification au navigateur : la bordure du haut reste calculée à rgb(0, 128, 0) (vert) et celle du bas passe bien à rgb(0, 0, 255) (bleu). Attention à l’ordre : si vous écrivez border après border-bottom-color, le raccourci réinitialise la couleur du bas et votre bleu disparaît.

Bordures arrondies

Attendue avec impatience par les développeurs Web, la propriété border-radius est arrivée avec le CSS 3 et permet de créer très facilement des angles arrondis. Il suffit d’indiquer la taille de l’arrondi, en pixels :

p {
  border: 20px double green;
  border-radius: 15px;
}

Il est aussi possible de donner un arrondi différent à chaque coin, en indiquant 4 valeurs séparées par des espaces. La première correspond au coin supérieur gauche, puis on tourne dans le sens des aiguilles d’une montre : supérieur droit, inférieur droit, inférieur gauche.

p {
  border: 2px solid green;
  border-radius: 10px 20px 30px 40px;
}

Petit bonus que j’utilise tout le temps : border-radius: 50%; sur un élément carré donne un cercle parfait. Mesuré pendant la rédaction : un bloc de 100 pixels sur 100 avec cette valeur s’affiche bien comme un rond (très pratique pour les avatars).

Les ombres

Les ombres sont aussi une des nombreuses nouveautés du CSS 3. Avec une seule ligne de code, vous pouvez ajouter une ombre à un bloc ou à un texte.

Les ombres des boîtes

La propriété pour créer une ombre sur un bloc est box-shadow. Dans sa forme la plus courante, elle prend 4 valeurs :

la première pour décaler l’ombre horizontalement ;
la deuxième pour décaler l’ombre verticalement ;
la troisième pour adoucir le dégradé de l’ombre (le flou) ;
la quatrième pour donner la couleur de l’ombre.

Ainsi, pour appliquer à un paragraphe une ombre décalée de 10 pixels vers la droite et vers le bas, avec un adoucissement de 5 pixels, en rouge :

p {
  box-shadow: 10px 10px 5px red;
}

Les trois premières valeurs de box-shadow : décalage horizontal, décalage vertical, flou.

Je vous conseille de tester sans adoucissement (0px) : vous constaterez que l’effet est vraiment moins joli. Deux options viennent compléter cette propriété :

inset, ajouté au début ou à la fin, projette l’ombre vers l’intérieur du bloc au lieu de l’extérieur ;
une quatrième longueur, l’étalement (spread), agrandit l’ombre dans toutes les directions : box-shadow: 10px 10px 5px 15px red; produit une ombre 15 pixels plus large que la boîte de chaque côté.

Plusieurs ombres à la fois

On peut cumuler plusieurs ombres sur le même élément, en les séparant par des virgules. Un lecteur, Cal, le signalait déjà en commentaire de cet article en 2019 (son message est conservé en bas de page) : c’est l’astuce qu’utilisent tous les générateurs d’ombres pour produire des effets de profondeur réalistes. Une ombre nette et proche, plus une ombre large et diffuse :

.carte {
  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.3),
    0 8px 24px rgba(0, 0, 0, 0.2);
}

Vérifié au navigateur pendant la rédaction : le style calculé conserve bien les deux ombres, dessinées l’une sur l’autre (la première déclarée est au premier plan). C’est la recette des ombres douces que vous voyez sur les cartes de la plupart des sites modernes.

L’ombre du texte

Avec la propriété text-shadow, vous pouvez ajouter une ombre directement sur les lettres, ce qui complète bien les propriétés de mise en forme du texte. Comme pour box-shadow, on indique les 2 valeurs de décalage, l’adoucissement et la couleur :

h1 {
  text-shadow: 2px 2px 4px gray;
}

Deux différences avec box-shadow, mesurées pendant la rédaction : text-shadow n’accepte ni le mot-clé inset, ni la valeur d’étalement. Si vous ajoutez une quatrième longueur, le navigateur considère la déclaration invalide et l’ignore entièrement (le style calculé retombe à none, donc plus aucune ombre). En revanche, les ombres multiples séparées par des virgules fonctionnent aussi sur le texte.

Outline : la fausse jumelle de border

Il existe une propriété qui ressemble beaucoup à border : outline. Elle prend les mêmes valeurs (épaisseur, style, couleur), mais son comportement est différent, et la différence est facile à mesurer. J’ai comparé deux blocs de 200 pixels de large dans Chrome pendant la rédaction :

.avec-bordure {
  width: 200px;
  border: 10px solid green; /* largeur totale mesurée : 220px */
}

.avec-outline {
  width: 200px;
  outline: 10px solid green; /* largeur totale mesurée : 200px */
}

La bordure fait partie de la boîte : avec 10 pixels de chaque côté, mon bloc passe de 200 à 220 pixels de large et pousse ses voisins. Le contour outline, lui, est dessiné par-dessus la page sans rien décaler : le bloc reste mesuré à 200 pixels. Ce point deviendra plus clair encore quand nous verrons le modèle de boîte, qui explique comment le navigateur calcule la taille des éléments.

border s'ajoute à la taille de l'élément, outline se dessine par-dessus sans la modifier.

À quoi sert outline, alors ? C’est le contour que le navigateur affiche autour d’un champ de formulaire ou d’un lien quand on navigue au clavier : il signale l’élément qui a le focus. Vous pouvez le personnaliser, et même l’écarter de l’élément avec outline-offset (testé avec 6 pixels d’écart : la largeur du bloc ne bouge toujours pas). Évitez en revanche de le supprimer avec outline: none; sans le remplacer : les personnes qui naviguent au clavier ne sauraient plus où elles se trouvent sur la page.

Pour résumer

Avec la propriété border, on donne une bordure à un élément HTML en trois valeurs : l’épaisseur (en pixels), le style de trait et la couleur. Les variantes border-top, border-bottom, border-left et border-right ciblent un seul côté.
Grâce à la propriété border-radius, on arrondit les angles, avec une valeur unique ou une valeur par coin ; 50% sur un carré donne un cercle.
En utilisant la propriété box-shadow, on donne une ombre à un bloc : décalage horizontal, décalage vertical, adoucissement, couleur, plus les options inset et l’étalement.
Plusieurs ombres peuvent être cumulées en les séparant par des virgules, sur les blocs comme sur le texte.
text-shadow fonctionne comme box-shadow pour le texte, mais sans inset ni étalement.
outline dessine un contour qui ne modifie pas la taille de l’élément, contrairement à border ; c’est lui qui matérialise le focus clavier.

J’espère que ce cours vous a plu. Une question ou une erreur repérée ? Le formulaire de la page à propos arrive directement dans ma boîte mail.

Commentaires

Deux commentaires reçus à l’époque WordPress de ce site, conservés tels quels lors de la migration de 2026 (le lien que mentionnait Cal était déjà mort en 2019, il n’a pas été repris) :

Cal, le 21 septembre 2019

Très bon article. En faisant quelques recherches complémentaires j’ai vu qu’ils existait des outils permettant de générer des ombres (celui-ci par exemple). Ils expliquent d’ailleurs qu’on peut ajouter plusieurs ombres à la suite en les séparant par des virgules 🙂

Devenez Développeur, le 23 septembre 2019

Merci de votre commentaire, il est vrai que les générateurs sont de bons outils pour aider au développement et gagner du temps. En revanche votre lien ne marche pas… Pourriez vous le remettre ?