# CSS-kleurverloopborder: vier manieren om er een te tekenen

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

border-color accepteert geen kleurverloop, dus elke kleurverloopcontour is een omweg. Dit zijn de vier die ertoe doen, wat elk wel en niet kan en welke je pakt.

## The short version

- CSS kan geen kleurverloop in border-color zetten, dus een CSS-kleurverloopborder wordt altijd met een andere techniek getekend.
- border-image met een kleurverloop is de kortste methode, maar negeert border-radius, dus het past alleen bij vierkante hoeken.
- Twee achtergrondlagen, één begrensd tot de padding box en één tot de border box, geven een afgeronde kleurverloopborder zolang de binnenkant een effen kleur is.
- De maskertechniek snijdt het midden uit een kleurverloopblaag en geeft een afgeronde kleurverloopborder met een transparante binnenkant.
- Een roterend conic gradient, aangestuurd door een aangepaste eigenschap geregistreerd met @property, is de gebruikelijke manier om een kleurverloopborder te animeren.

Een **CSS-kleurverloopborder** is een contour waarvan de kleur langs zijn lengte overloopt. Het addertje is dat `border-color` alleen kleuren accepteert, geen afbeeldingen, dus er is geen enkele eigenschap voor. In plaats daarvan teken je het kleurverloop elders en toon je slechts een dunne band ervan. Er zijn vier betrouwbare manieren, en de juiste hangt af van twee vragen: heeft het element afgeronde hoeken, en moet de binnenkant transparant zijn?

| Methode | Afgeronde hoeken | Transparante binnenkant | Het best voor |
| --- | --- | --- | --- |
| `border-image` | Nee | Ja | Vierkante kaarten, scheidingslijnen, tabellen |
| Twee achtergronden | Ja | Nee, heeft een effen vulling nodig | De meeste kaarten en knoppen |
| Masker op een pseudo-element | Ja | Ja | Kaarten over afbeeldingen of kleurverlopen |
| Pseudo-element erachter | Ja | Nee | Gloed en geanimeerde ringen |

Kies aan de hand van de twee vragen: hoeken en binnenkant.

- Violet naar cyaan: `linear-gradient(135deg, #7c3aed, #22d3ee)`
- Mandarijn naar magenta: `linear-gradient(135deg, #f97316, #db2777)`
- Limoen naar turquoise: `linear-gradient(135deg, #a3e635, #0d9488)`
- Zilveren rand: `linear-gradient(135deg, #e5e7eb, #6b7280, #f9fafb)`

Kleurverlopen die goed lezen als dunne contour. Hoge verzadiging telt op een lijn van 2px meer dan op een hele achtergrond.

## Methode 1: border-image

`border-image` accepteert elke afbeelding, ook een kleurverloop. Stel een borderbreedte en -stijl in, dan het kleurverloop, dan een slice van `1`, die de browser vertelt de hele afbeelding als rand te gebruiken. Het is twee regels, werkt overal en laat de binnenkant van het element ongemoeid.

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

De kortste kleurverloopborder. De `1` is de slice-waarde; zonder die wordt de border alleen in de hoeken getekend.

> **Geen afgeronde hoeken** Bij `border-image` begrenst `border-radius` nog steeds de achtergrond, maar de border zelf blijft vierkant. Moet het element afgerond zijn, gebruik dan een van de andere methoden.

## Methode 2: twee achtergronden met background-clip

Geef het element een transparante border en stapel dan twee achtergronden. De bovenste laag is de binnenvulling, begrensd tot de `padding-box`, dus hij stopt bij de binnenrand van de border. De onderste laag is het kleurverloop, begrensd tot de `border-box`, dus hij loopt onder de border door. Waar de vulling stopt, verschijnt het kleurverloop, en het volgt `border-radius` perfect.

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

De vulling is geschreven als kleurverloop van één kleur omdat alleen afbeeldingen zo gelaagd kunnen worden.

Dit is de methode om standaard te pakken. De enige beperking is dat de binnenkant ondoorzichtig moet zijn, want een transparante vulling zou het kleurverloop over de hele kaart tonen. Voor kaarten op een effen paginakleur is dat helemaal geen beperking: gebruik de paginakleur als vulling.

> **Waarom de verkorte schrijfwijze telt** `border-box` één keer schrijven in de `background`-verkorting stelt zowel `background-origin` als `background-clip` in, zodat het kleurverloop op de buitenrand wordt afgestemd. Stel je in langhand alleen `background-clip: border-box` in, dan wordt het kleurverloop op de padding box afgestemd en herhaalt het onder de border, met dunne reepjes van de verkeerde kleur langs de randen.

## Methode 3: de maskertechniek voor transparante binnenkanten

Als de kaart over een foto of een ander kleurverloop ligt, moet het midden doorzichtig zijn. Zet het kleurverloop op een pseudo-element dat de kaart bedekt, geef het padding gelijk aan de borderbreedte en maskeer het met twee lagen: één die alleen de content box bedekt en één die alles bedekt. De ene van de andere uitsluiten laat alleen de paddingring zichtbaar.

```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;
}
```

Een kleurverloopring met een transparant midden. Het voorvoegselpaar dekt oudere WebKit; de standaardregel `mask` dekt alles wat actueel is.

`pointer-events: none` voorkomt dat het pseudo-element klikken opslokt die voor de inhoud van de kaart bedoeld zijn. De [MDN-referentie voor mask-composite](https://developer.mozilla.org/en-US/docs/Web/CSS/mask-composite) legt de compositiesleutelwoorden uit. Dit is de methode achter de meeste [glassmorphism](https://gradiently.design/nl/guide/glassmorphism)-kaarten met gloeiende randen.

## Methode 4: een pseudo-element erachter, voor gloed en animatie

Plaats een kleurverloop-pseudo-element iets groter dan de kaart, achter de inhoud, en bedek het midden met een tweede pseudo-element met de effen vulling van de kaart. De zichtbare rand is het kleurverloop. Omdat het kleurverloop op een eigen laag leeft, kun je er een kopie van vervagen voor een gloed, of hem roteren.

```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; }
}
```

Een geanimeerde kleurverloopborder. De geregistreerde `--angle` laat de browser de conic starthoek vloeiend interpoleren en `::after` tekent de vulling over het midden.

Het kleurverloop van de roterende ring: `conic-gradient(from 0deg, #7c3aed, #22d3ee, #f472b6, #7c3aed)`

De eerste kleur aan het eind herhalen verbergt de naad terwijl hij draait. [CSS conic gradients](https://gradiently.design/nl/guide/css-conic-gradient) behandelt de functie diepgaand.

De buitenste straal moet gelijk zijn aan de binnenste straal plus de borderbreedte, en daarom gebruikt het pseudo-element 18px rond een kaart van 16px. Voor meer manieren om beweging in kleurverlopen te brengen, zie [geanimeerde CSS-kleurverlopen](https://gradiently.design/nl/guide/css-animated-gradient).

## Ontwerptips voor kleurverloopborders

### Vermijden

- Kleurverloopborders op elke kaart in een raster
- Kleurverlopen met lage verzadiging op een lijn van 1px, die als grijs lezen
- Een kleurverloopborder en een kleurverloopvulling op hetzelfde element
- Snel draaiende ringen op inhoud die mensen moeten lezen

### Doen

- De kleurverloopborder reserveren voor één uitgelicht item, zoals een aanbevolen abonnement
- 2px of meer en verzadigde stops gebruiken
- Een rustige vulling met een levendige rand, of andersom
- Trage rotatie, gepauzeerd voor verminderde beweging

Kleurverloopborders werken het best als nadruk. Dezelfde logica geldt voor knoppen, behandeld in [kleurverloopknoppen in CSS](https://gradiently.design/nl/guide/css-gradient-button).

## FAQ

### Hoe maak ik een kleurverloopborder in CSS?

De snelste manier is `border: 3px solid; border-image: linear-gradient(135deg, #7c3aed, #22d3ee) 1;`. Gebruik voor afgeronde hoeken twee achtergronden begrensd tot `padding-box` en `border-box`.

### Waarom werkt border-radius niet met border-image?

Volgens de specificatie wordt een border getekend met `border-image` niet afgerond door `border-radius`. Gebruik de background-clip- of maskermethode voor afgeronde kleurverloopborders.

### Hoe maak ik een kleurverloopborder met een transparante achtergrond?

Gebruik de maskertechniek: een pseudo-element met het kleurverloop, padding gelijk aan de borderbreedte en een masker dat zijn content box uitsluit.

### Hoe animeer ik een kleurverloopborder?

Registreer een hoek met `@property`, gebruik die als `from`-hoek van een conic gradient op een pseudo-element en animeer die eigenschap van 0deg naar 360deg.

### Welke methode voor een kleurverloopborder moet ik gebruiken?

Gebruik twee achtergronden voor de meeste afgeronde kaarten en knoppen, `border-image` voor vierkante randen en de maskertechniek alleen als de binnenkant transparant moet blijven.