# Bordure dégradée en CSS : quatre façons de la dessiner

[Canonical HTML page](https://gradiently.design/fr/guide/css-gradient-border)

border-color n’accepte pas de dégradé : tout contour dégradé est donc un contournement. Voici les quatre qui comptent, ce que chacun sait ou non faire, et lequel choisir.

## The short version

- Le CSS ne peut pas mettre de dégradé dans border-color : une bordure dégradée CSS se dessine donc toujours avec une autre technique.
- border-image avec un dégradé est la méthode la plus courte, mais elle ignore border-radius : elle ne convient qu’aux coins carrés.
- Deux calques d’arrière-plan, l’un découpé à la boîte de remplissage et l’autre à la boîte de bordure, donnent une bordure dégradée arrondie tant que l’intérieur est une couleur unie.
- La technique du masque découpe le centre d’un calque de dégradé, ce qui donne une bordure dégradée arrondie à l’intérieur transparent.
- Un dégradé conique en rotation, piloté par une propriété personnalisée enregistrée avec @property, est la façon habituelle d’animer une bordure dégradée.

Une **bordure dégradée CSS** est un contour dont la couleur se fond tout du long. Le hic, c’est que `border-color` n’accepte que des couleurs, pas des images : il n’existe donc pas de propriété unique. On dessine plutôt le dégradé ailleurs et on n’en montre qu’une fine bande. Il y a quatre méthodes fiables, et la bonne dépend de deux questions : l’élément a-t-il des coins arrondis, et son intérieur doit-il être transparent ?

| Méthode | Coins arrondis | Intérieur transparent | Idéal pour |
| --- | --- | --- | --- |
| `border-image` | Non | Oui | Cartes carrées, séparateurs, tableaux |
| Deux arrière-plans | Oui | Non, il faut un remplissage uni | La plupart des cartes et des boutons |
| Masque sur un pseudo-élément | Oui | Oui | Cartes sur des images ou des dégradés |
| Pseudo-élément derrière | Oui | Non | Lueurs et anneaux animés |

Choisissez selon les deux questions : coins et intérieur.

- Violet vers cyan: `linear-gradient(135deg, #7c3aed, #22d3ee)`
- Mandarine vers magenta: `linear-gradient(135deg, #f97316, #db2777)`
- Citron vert vers sarcelle: `linear-gradient(135deg, #a3e635, #0d9488)`
- Bord argenté: `linear-gradient(135deg, #e5e7eb, #6b7280, #f9fafb)`

Des dégradés qui se lisent bien en contours fins. Une forte saturation compte plus sur une ligne de 2 px que sur tout un arrière-plan.

## Méthode 1 : border-image

`border-image` accepte n’importe quelle image, dégradé compris. Définissez une largeur et un style de bordure, puis le dégradé, puis un découpage de `1`, qui dit au navigateur d’utiliser l’image entière comme bord. Deux lignes, ça marche partout, et l’intérieur de l’élément reste intact.

```css
.panel {
  border: 3px solid;
  border-image: linear-gradient(135deg, #7c3aed, #22d3ee) 1;
}
```

La bordure dégradée la plus courte. Le `1` est la valeur de découpage ; sans lui, la bordure ne se dessine que dans les coins.

> **Pas de coins arrondis** Avec `border-image`, `border-radius` découpe encore l’arrière-plan, mais la bordure elle-même reste carrée. Si l’élément doit être arrondi, utilisez une autre méthode.

## Méthode 2 : deux arrière-plans avec background-clip

Donnez à l’élément une bordure transparente, puis empilez deux arrière-plans. Le calque du dessus est le remplissage intérieur, découpé à la `padding-box`, donc il s’arrête au bord intérieur de la bordure. Le calque du dessous est le dégradé, découpé à la `border-box`, donc il passe sous la bordure. Là où le remplissage s’arrête, le dégradé apparaît, et il suit parfaitement `border-radius`.

```css
.card {
  border: 2px solid transparent;
  border-radius: 16px;
  background:
    linear-gradient(#0f172a, #0f172a) padding-box,
    linear-gradient(135deg, #7c3aed, #22d3ee) border-box;
}
```

Le remplissage s’écrit comme un dégradé d’une seule couleur car seules des images peuvent être empilées ainsi.

C’est la méthode à privilégier par défaut. Sa seule limite est que l’intérieur doit être opaque, car un remplissage transparent révélerait le dégradé sur toute la carte. Pour des cartes posées sur une couleur de page unie, ce n’est pas une limite : utilisez la couleur de la page comme remplissage.

> **Pourquoi la notation abrégée compte** Écrire `border-box` une fois dans la notation abrégée `background` règle à la fois `background-origin` et `background-clip`, donc le dégradé est dimensionné jusqu’au bord extérieur. Si vous ne réglez que `background-clip: border-box` en notation détaillée, le dégradé est dimensionné sur la boîte de remplissage et se répète sous la bordure, laissant de fins liserés de la mauvaise couleur le long des bords.

## Méthode 3 : la technique du masque pour un intérieur transparent

Quand la carte repose sur une photo ou un autre dégradé, le centre doit être transparent. Placez le dégradé sur un pseudo-élément qui couvre la carte, donnez-lui un remplissage égal à la largeur de la bordure, puis masquez-le avec deux calques : l’un ne couvrant que la boîte de contenu et l’autre couvrant tout. Exclure l’un de l’autre ne laisse visible que l’anneau de remplissage.

```css
.glass-card {
  position: relative;
  border-radius: 16px;
}

.glass-card::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 2px; /* border width */
  border-radius: inherit;
  background: linear-gradient(135deg, #7c3aed, #22d3ee);
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#000 0 0) content-box exclude,
    linear-gradient(#000 0 0);
  pointer-events: none;
}
```

Un anneau dégradé au centre transparent. La paire préfixée couvre les anciens WebKit ; la ligne `mask` standard couvre tout ce qui est actuel.

`pointer-events: none` empêche le pseudo-élément d’avaler les clics destinés au contenu de la carte. La [référence MDN de mask-composite](https://developer.mozilla.org/en-US/docs/Web/CSS/mask-composite) explique les mots-clés de composition. C’est la méthode derrière la plupart des cartes [glassmorphism](https://gradiently.design/fr/guide/glassmorphism) aux bords lumineux.

## Méthode 4 : un pseudo-élément derrière, pour les lueurs et l’animation

Placez un pseudo-élément à dégradé légèrement plus grand que la carte, derrière son contenu, et couvrez le centre avec un second pseudo-élément portant le remplissage uni de la carte. Le bord visible est le dégradé. Comme le dégradé vit sur son propre calque, vous pouvez en flouter une copie pour une lueur, ou le faire tourner.

```css
@property --angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

.ring {
  position: relative;
  isolation: isolate;
  border-radius: 16px;
}

.ring::before {
  content: "";
  position: absolute;
  inset: -2px;
  z-index: -1;
  border-radius: 18px;
  background: conic-gradient(from var(--angle), #7c3aed, #22d3ee, #f472b6, #7c3aed);
  animation: spin 6s linear infinite;
}

/* the card's fill, painted over the middle of the ring */
.ring::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: #0f172a;
}

@keyframes spin {
  to { --angle: 360deg; }
}

@media (prefers-reduced-motion: reduce) {
  .ring::before { animation: none; }
}
```

Une bordure dégradée animée. Le `--angle` enregistré permet au navigateur d’interpoler en douceur l’angle de départ du conique, et `::after` peint le remplissage sur le centre.

Le dégradé de l’anneau rotatif: `conic-gradient(from 0deg, #7c3aed, #22d3ee, #f472b6, #7c3aed)`

Répéter la première couleur à la fin cache la couture pendant la rotation. Les [dégradés coniques CSS](https://gradiently.design/fr/guide/css-conic-gradient) détaillent la fonction.

Le rayon extérieur doit valoir le rayon intérieur plus la largeur de la bordure, c’est pourquoi le pseudo-élément utilise 18px autour d’une carte de 16px. Pour d’autres façons d’animer les dégradés, voyez les [dégradés animés en CSS](https://gradiently.design/fr/guide/css-animated-gradient).

## Conseils de design pour les bordures dégradées

### À éviter

- Des bordures dégradées sur chaque carte d’une grille
- Des dégradés peu saturés sur une ligne de 1px, qui paraissent gris
- Une bordure dégradée et un remplissage dégradé sur le même élément
- Des anneaux qui tournent vite autour de contenu à lire

### À faire

- Réserver le bord dégradé à un élément mis en avant, comme une offre phare
- Utiliser 2px ou plus et des arrêts saturés
- Un remplissage calme avec un bord vif, ou l’inverse
- Une rotation lente, mise en pause pour le mouvement réduit

Les bordures dégradées fonctionnent mieux comme accent. La même logique vaut pour les boutons, traités dans les [boutons dégradés en CSS](https://gradiently.design/fr/guide/css-gradient-button).

## FAQ

### Comment faire une bordure dégradée en CSS ?

Le plus rapide : `border: 3px solid; border-image: linear-gradient(135deg, #7c3aed, #22d3ee) 1;`. Pour des coins arrondis, utilisez deux arrière-plans découpés à `padding-box` et `border-box`.

### Pourquoi border-radius ne fonctionne-t-il pas avec border-image ?

Selon la spécification, une bordure dessinée avec `border-image` n’est pas arrondie par `border-radius`. Utilisez la méthode background-clip ou celle du masque pour des bordures dégradées arrondies.

### Comment faire une bordure dégradée avec un arrière-plan transparent ?

Utilisez la technique du masque : un pseudo-élément avec le dégradé, un remplissage égal à la largeur de la bordure et un masque qui exclut sa boîte de contenu.

### Comment animer une bordure dégradée ?

Enregistrez un angle avec `@property`, utilisez-le comme angle `from` d’un dégradé conique sur un pseudo-élément, et animez cette propriété de 0deg à 360deg.

### Quelle méthode de bordure dégradée choisir ?

Deux arrière-plans pour la plupart des cartes et boutons arrondis, `border-image` pour les bords carrés, et la technique du masque seulement quand l’intérieur doit rester transparent.