# Borda com gradiente em CSS: quatro jeitos de desenhar uma

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

O border-color não aceita gradiente, então todo contorno com gradiente é uma solução alternativa. Aqui estão as quatro que importam, o que cada uma pode e não pode fazer e qual escolher.

## The short version

- O CSS não aceita um gradiente em border-color, então uma borda com gradiente em CSS é sempre desenhada com outra técnica.
- O border-image com um gradiente é o método mais curto, mas ignora o border-radius, então só serve para cantos retos.
- Duas camadas de fundo, uma recortada na caixa de preenchimento e outra na caixa da borda, dão uma borda com gradiente arredondada, desde que o interior seja uma cor sólida.
- A técnica da máscara recorta o meio de uma camada de gradiente, o que dá uma borda com gradiente arredondada e com interior transparente.
- Um gradiente cônico giratório, controlado por uma propriedade personalizada registrada com @property, é o jeito usual de animar uma borda com gradiente.

Uma **borda com gradiente em CSS** é um contorno cuja cor se mistura ao longo do comprimento. O problema é que o `border-color` só aceita cores, não imagens, então não existe uma propriedade única para isso. Em vez disso, você desenha o gradiente em outro lugar e mostra só uma faixa fina dele. Há quatro jeitos confiáveis de fazer isso, e o certo depende de duas perguntas: o elemento tem cantos arredondados e o interior dele precisa ser transparente?

| Método | Cantos arredondados | Interior transparente | Melhor para |
| --- | --- | --- | --- |
| `border-image` | Não | Sim | Cards retos, divisores, tabelas |
| Dois fundos | Sim | Não, precisa de preenchimento sólido | A maioria dos cards e botões |
| Máscara em um pseudoelemento | Sim | Sim | Cards sobre imagens ou gradientes |
| Pseudoelemento atrás | Sim | Não | Brilhos e anéis animados |

Escolha pelas duas perguntas: cantos e interior.

- Violeta a ciano: `linear-gradient(135deg, #7c3aed, #22d3ee)`
- Tangerina a magenta: `linear-gradient(135deg, #f97316, #db2777)`
- Lima a verde-azulado: `linear-gradient(135deg, #a3e635, #0d9488)`
- Borda prateada: `linear-gradient(135deg, #e5e7eb, #6b7280, #f9fafb)`

Gradientes que funcionam bem como contornos finos. A alta saturação importa mais em uma linha de 2px do que em um fundo inteiro.

## Método 1: border-image

O `border-image` aceita qualquer imagem, inclusive um gradiente. Defina a largura e o estilo da borda, depois o gradiente e depois um corte de `1`, que diz ao navegador para usar a imagem inteira como borda. São duas linhas, funciona em todo lugar e deixa o interior do elemento intocado.

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

A borda com gradiente mais curta. O `1` é o valor do corte; sem ele, a borda só é desenhada nos cantos.

> **Sem cantos arredondados** Com o `border-image`, o `border-radius` ainda recorta o fundo, mas a borda em si continua reta. Se o elemento precisa ser arredondado, use um dos outros métodos.

## Método 2: dois fundos com background-clip

Dê ao elemento uma borda transparente e empilhe dois fundos. A camada de cima é o preenchimento interno, recortada no `padding-box`, então para na borda interna. A camada de baixo é o gradiente, recortado no `border-box`, então se estende por baixo da borda. Onde o preenchimento para, o gradiente aparece, e ele segue o `border-radius` perfeitamente.

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

O preenchimento é escrito como um gradiente de uma cor porque só imagens podem ser sobrepostas assim.

Esse é o método a usar por padrão. O único limite é que o interior precisa ser opaco, já que um preenchimento transparente revelaria o gradiente no card inteiro. Para cards sobre uma cor lisa de página, isso não é limite nenhum: use a cor da página como preenchimento.

> **Por que a forma abreviada importa** Escrever `border-box` uma vez na forma abreviada `background` define ao mesmo tempo `background-origin` e `background-clip`, então o gradiente é dimensionado até a borda externa. Se você definir só `background-clip: border-box` na forma longa, o gradiente é dimensionado pela caixa de preenchimento e se repete sob a borda, deixando finas lascas da cor errada ao longo das bordas.

## Método 3: a técnica da máscara para interiores transparentes

Quando o card fica sobre uma foto ou outro gradiente, o meio precisa ser transparente. Coloque o gradiente em um pseudoelemento que cubra o card, dê a ele um padding igual à largura da borda e mascare-o com duas camadas: uma cobrindo só a caixa de conteúdo e outra cobrindo tudo. Excluir uma da outra deixa visível apenas o anel do 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;
}
```

Um anel de gradiente com o centro transparente. O par com prefixo cobre o WebKit antigo; a linha `mask` padrão cobre tudo o que é atual.

O `pointer-events: none` impede que o pseudoelemento engula os cliques destinados ao conteúdo do card. A [referência de mask-composite do MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/mask-composite) explica as palavras-chave de composição. Esse é o método por trás da maioria dos cards de [glassmorphism](https://gradiently.design/pt-br/guide/glassmorphism) com bordas brilhantes.

## Método 4: um pseudoelemento atrás, para brilhos e animação

Coloque um pseudoelemento de gradiente um pouco maior que o card, atrás do conteúdo, e cubra o meio com um segundo pseudoelemento com o preenchimento sólido do card. A borda visível é o gradiente. Como o gradiente fica em uma camada própria, você pode desfocar uma cópia dele para um brilho, ou girá-lo.

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

Uma borda com gradiente animada. O `--angle` registrado deixa o navegador interpolar o ângulo inicial do cônico de forma suave, e o `::after` pinta o preenchimento sobre o meio.

O gradiente do anel giratório: `conic-gradient(from 0deg, #7c3aed, #22d3ee, #f472b6, #7c3aed)`

Repetir a primeira cor no fim esconde a emenda enquanto ele gira. [Gradientes cônicos em CSS](https://gradiently.design/pt-br/guide/css-conic-gradient) trata da função em profundidade.

O raio externo deve ser igual ao raio interno mais a largura da borda, e é por isso que o pseudoelemento usa 18px em volta de um card de 16px. Para mais jeitos de pôr movimento em gradientes, veja [gradientes animados em CSS](https://gradiently.design/pt-br/guide/css-animated-gradient).

## Dicas de design para bordas com gradiente

### Evite

- Bordas com gradiente em todo card de uma grade
- Gradientes de baixa saturação em uma linha de 1px, que parecem cinza
- Uma borda com gradiente e um preenchimento com gradiente no mesmo elemento
- Anéis girando rápido sobre conteúdo que as pessoas precisam ler

### Faça

- Reserve a borda com gradiente para um item em destaque, como um plano recomendado
- Use 2px ou mais e paradas saturadas
- Um preenchimento calmo com uma borda vívida, ou o contrário
- Rotação lenta, pausada para movimento reduzido

As bordas com gradiente funcionam melhor como ênfase. A mesma lógica vale para os botões, tratados em [botões com gradiente em CSS](https://gradiently.design/pt-br/guide/css-gradient-button).

## FAQ

### Como faço uma borda com gradiente em CSS?

O jeito mais rápido é `border: 3px solid; border-image: linear-gradient(135deg, #7c3aed, #22d3ee) 1;`. Para cantos arredondados, use dois fundos recortados em `padding-box` e `border-box`.

### Por que o border-radius não funciona com o border-image?

Pela especificação, uma borda desenhada com `border-image` não é arredondada pelo `border-radius`. Use o método do background-clip ou da máscara para bordas com gradiente arredondadas.

### Como faço uma borda com gradiente com fundo transparente?

Use a técnica da máscara: um pseudoelemento com o gradiente, padding igual à largura da borda e uma máscara que exclui a caixa de conteúdo dele.

### Como animo uma borda com gradiente?

Registre um ângulo com `@property`, use-o como o ângulo `from` de um gradiente cônico em um pseudoelemento e anime essa propriedade de 0deg a 360deg.

### Qual método de borda com gradiente devo usar?

Use dois fundos para a maioria dos cards e botões arredondados, `border-image` para bordas retas e a técnica da máscara só quando o interior precisa continuar transparente.