# Bordo a gradiente in CSS: quattro modi per disegnarlo

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

border-color non accetta un gradiente, quindi ogni contorno a gradiente è un ripiego. Ecco i quattro che contano, cosa può e non può fare ciascuno e quale scegliere.

## The short version

- Il CSS non può mettere un gradiente in border-color, quindi un bordo a gradiente in CSS si disegna sempre con un’altra tecnica.
- border-image con un gradiente è il metodo più breve, ma ignora border-radius, quindi va bene solo per angoli vivi.
- Due livelli di sfondo, uno ritagliato sul padding box e uno sul border box, danno un bordo a gradiente arrotondato purché l’interno sia a tinta unita.
- La tecnica della maschera ritaglia il centro di un livello di gradiente, e dà un bordo a gradiente arrotondato con l’interno trasparente.
- Un gradiente conico che ruota, guidato da una proprietà personalizzata registrata con @property, è il modo abituale di animare un bordo a gradiente.

Un **bordo a gradiente in CSS** è un contorno il cui colore si sfuma lungo la sua lunghezza. Il problema è che `border-color` accetta solo colori, non immagini, quindi non esiste una proprietà unica per farlo. Il gradiente si disegna invece altrove e se ne mostra solo una sottile fascia. Ci sono quattro modi affidabili per farlo, e quello giusto dipende da due domande: l’elemento ha angoli arrotondati? E il suo interno deve essere trasparente?

| Metodo | Angoli arrotondati | Interno trasparente | Ideale per |
| --- | --- | --- | --- |
| `border-image` | No | Sì | Schede con angoli vivi, divisori, tabelle |
| Due sfondi | Sì | No, serve un riempimento pieno | La maggior parte di schede e pulsanti |
| Maschera su uno pseudo-elemento | Sì | Sì | Schede sopra immagini o gradienti |
| Pseudo-elemento dietro | Sì | No | Aloni e anelli animati |

Scegli in base alle due domande: angoli e interno.

- Da viola a ciano: `linear-gradient(135deg, #7c3aed, #22d3ee)`
- Da mandarino a magenta: `linear-gradient(135deg, #f97316, #db2777)`
- Da lime a verde acqua: `linear-gradient(135deg, #a3e635, #0d9488)`
- Bordo argento: `linear-gradient(135deg, #e5e7eb, #6b7280, #f9fafb)`

Gradienti che si leggono bene come contorni sottili. Su una linea di 2px la saturazione alta conta più che su un intero sfondo.

## Metodo 1: border-image

`border-image` accetta qualsiasi immagine, gradiente compreso. Imposta spessore e stile del bordo, poi il gradiente, poi uno slice di `1`, che dice al browser di usare l’intera immagine come bordo. Sono due righe, funziona ovunque e lascia intatto l’interno dell’elemento.

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

Il bordo a gradiente più breve. L’`1` è il valore di slice; senza di esso il bordo si disegna solo negli angoli.

> **Niente angoli arrotondati** Con `border-image`, `border-radius` ritaglia ancora lo sfondo, ma il bordo resta a spigoli vivi. Se l’elemento deve essere arrotondato, usa uno degli altri metodi.

## Metodo 2: due sfondi con background-clip

Dai all’elemento un bordo trasparente, poi sovrapponi due sfondi. Il livello superiore è il riempimento interno, ritagliato sul `padding-box`, quindi si ferma al bordo interno. Il livello inferiore è il gradiente, ritagliato sul `border-box`, quindi si estende sotto il bordo. Dove si ferma il riempimento compare il gradiente, e segue alla perfezione `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;
}
```

Il riempimento è scritto come un gradiente di un solo colore perché solo le immagini si possono sovrapporre così.

È il metodo da scegliere per impostazione predefinita. Il suo unico limite è che l’interno deve essere opaco, perché un riempimento trasparente rivelerebbe il gradiente su tutta la scheda. Per le schede su un colore di pagina uniforme non è affatto un limite: usa il colore della pagina come riempimento.

> **Perché conta la forma abbreviata** Scrivere `border-box` una volta nella forma abbreviata `background` imposta sia `background-origin` sia `background-clip`, così il gradiente ha la dimensione del bordo esterno. Se imposti solo `background-clip: border-box` in forma estesa, il gradiente ha la dimensione del padding box e si ripete sotto il bordo, lasciando sottili strisce di colore sbagliato lungo i margini.

## Metodo 3: la tecnica della maschera per interni trasparenti

Quando la scheda sta sopra una foto o un altro gradiente, il centro deve essere trasparente. Metti il gradiente su uno pseudo-elemento che copre la scheda, dagli un padding pari allo spessore del bordo, poi maschera con due livelli: uno che copre solo il content box e uno che copre tutto. Escludere l’uno dall’altro lascia visibile solo l’anello del padding.

```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 anello a gradiente con il centro trasparente. La coppia con prefisso copre i vecchi WebKit; la riga `mask` standard copre tutto ciò che è attuale.

`pointer-events: none` impedisce allo pseudo-elemento di inghiottire i clic destinati al contenuto della scheda. Il [riferimento MDN su mask-composite](https://developer.mozilla.org/en-US/docs/Web/CSS/mask-composite) spiega le parole chiave di composizione. È il metodo dietro la maggior parte delle schede [glassmorphism](https://gradiently.design/it/guide/glassmorphism) con i bordi luminosi.

## Metodo 4: uno pseudo-elemento dietro, per aloni e animazione

Metti uno pseudo-elemento a gradiente leggermente più grande della scheda, dietro il suo contenuto, e copri il centro con un secondo pseudo-elemento che contiene il riempimento pieno della scheda. Il bordo visibile è il gradiente. Poiché il gradiente vive su un livello proprio, puoi sfocarne una copia per ottenere un alone, oppure ruotarlo.

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

Un bordo a gradiente animato. Il `--angle` registrato permette al browser di interpolare con fluidità l’angolo di partenza del gradiente conico, e `::after` dipinge il riempimento sopra il centro.

Il gradiente dell’anello rotante: `conic-gradient(from 0deg, #7c3aed, #22d3ee, #f472b6, #7c3aed)`

Ripetere il primo colore alla fine nasconde la giuntura mentre gira. I [gradienti conici in CSS](https://gradiently.design/it/guide/css-conic-gradient) approfondisce la funzione.

Il raggio esterno dovrebbe essere uguale al raggio interno più lo spessore del bordo, ed è per questo che lo pseudo-elemento usa 18px attorno a una scheda da 16px. Per altri modi di dare movimento ai gradienti, vedi i [gradienti animati in CSS](https://gradiently.design/it/guide/css-animated-gradient).

## Consigli di design per i bordi a gradiente

### Da evitare

- Bordi a gradiente su ogni scheda di una griglia
- Gradienti poco saturi su una linea di 1px, che sembrano grigi
- Un bordo a gradiente e un riempimento a gradiente sullo stesso elemento
- Anelli che ruotano veloci su contenuti da leggere

### Da fare

- Riservare il bordo a gradiente a un solo elemento in evidenza, come un piano consigliato
- Usare 2px o più e punti saturi
- Un riempimento calmo con un bordo vivace, o il contrario
- Rotazione lenta, sospesa per il movimento ridotto

I bordi a gradiente funzionano meglio come enfasi. Lo stesso ragionamento vale per i pulsanti, trattati in [pulsanti a gradiente in CSS](https://gradiently.design/it/guide/css-gradient-button).

## FAQ

### Come creo un bordo a gradiente in CSS?

Il modo più rapido è `border: 3px solid; border-image: linear-gradient(135deg, #7c3aed, #22d3ee) 1;`. Per gli angoli arrotondati, usa due sfondi ritagliati su `padding-box` e `border-box`.

### Perché border-radius non funziona con border-image?

Per specifica, un bordo disegnato con `border-image` non viene arrotondato da `border-radius`. Usa il metodo background-clip o quello della maschera per bordi a gradiente arrotondati.

### Come creo un bordo a gradiente con sfondo trasparente?

Usa la tecnica della maschera: uno pseudo-elemento con il gradiente, un padding pari allo spessore del bordo e una maschera che esclude il suo content box.

### Come animo un bordo a gradiente?

Registra un angolo con `@property`, usalo come angolo `from` di un gradiente conico su uno pseudo-elemento e anima quella proprietà da 0deg a 360deg.

### Quale metodo per il bordo a gradiente dovrei usare?

Usa due sfondi per la maggior parte di schede e pulsanti arrotondati, `border-image` per i bordi vivi e la tecnica della maschera solo quando l’interno deve restare trasparente.