OUJOOD.COM
Les bordures avancées en CSS3 : tour d'horizon des nouvelles propriétés
CSS3 — cours et tutoriel pratiqueCSS3 a profondément transformé la façon dont les développeurs web stylisent les bordures des éléments HTML. Là où CSS2 imposait de recourir à des images découpées pour simuler des effets visuels, CSS3 introduit des propriétés natives puissantes qui permettent de créer des interfaces modernes, esthétiques et performantes en pur CSS.
Dans ce chapitre, vous apprendrez à maîtriser les trois propriétés de bordures CSS3 essentielles :
- border-radius — pour arrondir les coins de n'importe quel élément
- box-shadow — pour ajouter des ombres portées internes ou externes
- border-image — pour utiliser une image comme bordure décorative
Compatibilité navigateurs en 2026 : Les propriétés border-radius et box-shadow sont nativement supportées par tous les navigateurs modernes (Chrome, Firefox, Safari, Edge, Opera) sans aucun préfixe vendeur. La propriété border-image est également bien supportée nativement depuis plusieurs années. Les préfixes -webkit- et -o- présents dans les anciens exemples ne sont plus nécessaires en 2026, mais restent inoffensifs pour la rétrocompatibilité.
CSS3 border-radius : créer des coins arrondis sans image
Avant CSS3, arrondir les coins d'un élément HTML nécessitait de découper quatre images (une par coin) et de les assembler avec des techniques de positionnement complexes. Cette approche était lourde, difficile à maintenir et pénalisante pour les performances.
Avec CSS3, la propriété border-radius permet d'arrondir les coins de tout élément HTML en une seule déclaration CSS, sans aucune image. Elle constitue aujourd'hui un fondamental du design CSS moderne et responsive.
Syntaxe de border-radius
La propriété border-radius est un raccourci CSS (shorthand property) qui définit simultanément les quatre sous-propriétés suivantes, dans le sens des aiguilles d'une montre en partant du coin supérieur gauche :
- border-top-left-radius — coin supérieur gauche
- border-top-right-radius — coin supérieur droit
- border-bottom-right-radius — coin inférieur droit
- border-bottom-left-radius — coin inférieur gauche
La valeur acceptée est une longueur en px, em, rem ou un pourcentage. Une valeur de 50% sur un élément carré produit un cercle parfait, très utilisé pour les avatars et boutons ronds.
Exemple 1 — Arrondir uniformément les quatre coins d'un div
Cet exemple illustre l'utilisation la plus courante de border-radius : appliquer le même rayon d'arrondi à tous les coins d'un bloc <div>. La valeur 25px crée un arrondi visible sans déformer le contenu.
<!doctype html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Coins arrondis avec border-radius — CSS3</title>
<style>
div {
padding: 10px 40px;
background: #ccc;
width: 300px;
/* border-radius arrondit les 4 coins simultanément */
border-radius: 25px;
}
</style>
</head>
<body>
<div>
La propriété border-radius arrondit les coins de cet élément div
sans utiliser aucune image — uniquement du CSS natif.
</div>
</body>
</html>
Exemple 2 — Arrondir des coins spécifiques : haut-gauche et bas-droit
En utilisant les sous-propriétés individuelles border-top-left-radius et border-bottom-right-radius, vous pouvez créer des formes asymétriques élégantes — très utilisées dans les cards UI modernes et les bulles de dialogue.
<!doctype html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Coins arrondis partiels — CSS3</title>
<style>
div {
padding: 10px 40px;
background: #ccc;
width: 300px;
border: 2px solid #000;
/* Arrondit uniquement le coin supérieur gauche */
border-top-left-radius: 25px;
/* Arrondit uniquement le coin inférieur droit */
border-bottom-right-radius: 25px;
/* Les coins haut-droit et bas-gauche restent droits à 0° */
}
</style>
</head>
<body>
<div>
border-top-left-radius arrondit le coin supérieur gauche.<br>
border-bottom-right-radius arrondit le coin inférieur droit.<br>
Les deux autres coins restent à angle droit.
</div>
</body>
</html>
Exemple 3 — Créer un cercle parfait avec border-radius à 50%
En appliquant border-radius: 50% à un élément de dimensions égales (largeur = hauteur), vous obtenez un cercle CSS pur, idéal pour les avatars, badges et boutons iconiques.
<style>
.avatar {
width: 100px;
height: 100px;
background: #4a90d9;
/* 50% sur un carré crée un cercle parfait */
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: bold;
}
</style>
<div class="avatar">CSS3</div>
CSS3 box-shadow : ombres portées et internes
La propriété box-shadow est l'une des fonctionnalités les plus puissantes de CSS3 pour le design d'interfaces utilisateur modernes. Elle permet d'ajouter une ou plusieurs ombres à un élément HTML — qu'il s'agisse d'une ombre portée externe donnant l'illusion de profondeur, ou d'une ombre interne simulant un effet de relief creux.
Syntaxe complète de box-shadow :
box-shadow: offset-x offset-y blur-radius spread-radius color [inset];
Voici la description détaillée de chaque paramètre :
- offset-x (décalage horizontal) : valeur en
pxouem. Positive = ombre à droite, négative = ombre à gauche. - offset-y (décalage vertical) : valeur positive = ombre en bas, valeur négative = ombre en haut.
- blur-radius (rayon de flou gaussien) :
0= ombre nette et dure. Plus la valeur augmente, plus l'ombre est diffuse et douce. Valeurs négatives non autorisées. - spread-radius (rayon d'expansion) : valeur positive = l'ombre s'étend dans toutes les directions au-delà des bords de l'élément. Valeur négative = l'ombre se rétracte.
- color : couleur de l'ombre. Supporte toutes les notations CSS : noms,
#hex,rgb(),rgba(),hsl(). L'utilisation dergba()permet de gérer la transparence. - inset (optionnel) : mot-clé qui transforme l'ombre externe en ombre interne. L'élément semble alors être enfoncé dans la page.
Il est possible de chaîner plusieurs ombres en les séparant par des virgules, permettant des effets de relief et de profondeur très sophistiqués.
Exemple 4 — Ombre portée externe classique sur un div
L'exemple le plus courant : une ombre portée douce et décalée qui donne une sensation de profondeur à un bloc. Très utilisé pour les cards, modals et composants UI en Material Design.
<!doctype html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>box-shadow CSS3 — ombre portée</title>
<style>
div {
padding: 10px 40px;
background: #d99999;
width: 300px;
border: 2px solid #000;
border-radius: 25px;
/*
box-shadow : 10px à droite, 10px en bas,
flou de 5px, couleur gris #666666
Résultat : ombre portée douce en bas à droite
*/
box-shadow: 10px 10px 5px #666666;
}
</style>
</head>
<body>
<div>Boîte avec coins arrondis et ombre portée externe</div>
</body>
</html>
Exemple 5 — Ombre interne (inset) et ombres multiples
Le mot-clé inset inverse la direction de l'ombre : elle s'affiche à l'intérieur de l'élément, créant un effet de creux ou d'embossage. En combinant plusieurs ombres séparées par des virgules, on peut simuler des effets de relief complexes utilisés en neumorphism design.
<style>
.ombre-interne {
padding: 20px 40px;
background: #e0e0e0;
width: 300px;
border-radius: 15px;
/* inset : l'ombre est projetée À L'INTÉRIEUR de l'élément */
box-shadow: inset 5px 5px 10px #b0b0b0,
inset -5px -5px 10px #ffffff;
/* Deux ombres inset opposées = effet neumorphism */
}
.ombres-multiples {
padding: 20px 40px;
background: #fff;
width: 300px;
border-radius: 8px;
/* Ombres multiples séparées par virgule : effet profondeur */
box-shadow: 0 1px 3px rgba(0,0,0,0.12),
0 4px 8px rgba(0,0,0,0.08),
0 12px 24px rgba(0,0,0,0.05);
}
</style>
<div class="ombre-interne">Effet neumorphism avec double ombre inset</div>
<br>
<div class="ombres-multiples">Profondeur réaliste avec 3 ombres empilées</div>
CSS3 border-image : bordures décoratives à partir d'une image
La propriété border-image est l'une des fonctionnalités les plus créatives de CSS3 : elle permet d'utiliser n'importe quelle image comme bordure d'un élément HTML. Le moteur CSS découpe automatiquement l'image en neuf zones (les quatre coins, les quatre côtés et le centre) selon les tranches définies, puis les applique aux parties correspondantes de la bordure.
Cette propriété est un raccourci pour :
- border-image-source : l'URL ou le dégradé utilisé comme image de bordure
- border-image-slice : définit comment découper l'image en 9 zones
- border-image-width : largeur de la bordure image
- border-image-outset : espace entre la bordure et le bord de l'élément
- border-image-repeat :
stretch(étirement),round(répétition ajustée) ourepeat
L'image originale utilisée pour les exemples ci-dessous :
Pour utiliser cette image : clic droit → Enregistrer l'image sous.
Exemple 6 — border-image avec modes round et stretch
Cet exemple compare les deux modes de répétition les plus courants : round répète le motif en l'ajustant pour qu'il s'intègre parfaitement, tandis que stretch étire le motif pour qu'il couvre toute la longueur du côté.
<!doctype html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>border-image CSS3</title>
<style>
div {
/* La bordure doit être définie pour que border-image fonctionne */
border: 15px solid transparent;
width: 250px;
padding: 10px 20px;
margin: 50px;
}
#mode-round {
/*
border-image : url de l'image, slice 30px (découpe les 4 côtés),
mode "round" : le motif se répète en s'ajustant pour tenir entier
*/
border-image: url(images/border.gif) 30 30 round;
}
#mode-stretch {
/*
mode "stretch" : le motif des côtés est étiré pour couvrir la longueur
Résultat : le motif peut paraître déformé sur les longs côtés
*/
border-image: url(images/border.gif) 30 30 stretch;
}
</style>
</head>
<body>
<div id="mode-round">
border-image avec mode round : le motif se répète de façon ajustée
</div>
<div id="mode-stretch">
border-image avec mode stretch : le motif est étiré sur toute la longueur
</div>
</body>
</html>
Exemple 7 — border-image avec un dégradé CSS (sans image externe)
Depuis CSS3, border-image-source accepte non seulement des images mais aussi des dégradés CSS natifs (linear-gradient, radial-gradient). Cela permet de créer des bordures colorées dégradées sans aucune image externe — une technique très utilisée dans le design d'interfaces modernes.
<style>
.bordure-degrade {
border: 4px solid transparent;
padding: 20px 30px;
width: 280px;
border-radius: 12px;
/*
border-image avec linear-gradient :
crée une bordure dégradée de gauche à droite
La valeur "1" du slice couvre toute la surface
*/
border-image: linear-gradient(to right, #e96c6c, #4a90d9) 1;
/* Note : border-image ne fonctionne pas avec border-radius */
}
.bordure-outline {
/* Alternative compatible border-radius : utiliser outline ou pseudo-élément */
background: linear-gradient(white, white) padding-box,
linear-gradient(135deg, #e96c6c, #4a90d9) border-box;
border: 4px solid transparent;
border-radius: 12px;
padding: 20px 30px;
width: 280px;
}
</style>
<div class="bordure-degrade">Bordure dégradée via border-image gradient</div>
<br>
<div class="bordure-outline">Bordure dégradée compatible border-radius</div>
Par carabde | Mis à jour le 14 mars 2026