# Borde con degradado en CSS: cuatro formas de dibujarlo

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

border-color no admite un degradado, así que todo contorno con degradado es un apaño. Aquí van los cuatro que importan, qué puede y qué no puede hacer cada uno y cuál elegir.

## The short version

- CSS no puede poner un degradado en border-color, así que un borde con degradado en CSS siempre se dibuja con otra técnica.
- border-image con un degradado es el método más corto, pero ignora border-radius, así que solo sirve para esquinas rectas.
- Dos capas de fondo, una recortada al padding box y otra al border box, dan un borde degradado redondeado siempre que el interior sea de un color liso.
- La técnica de máscara recorta el centro de una capa de degradado, lo que da un borde degradado redondeado con el interior transparente.
- Un degradado cónico giratorio, controlado por una propiedad personalizada registrada con @property, es la forma habitual de animar un borde con degradado.

Un **borde con degradado en CSS** es un contorno cuyo color se mezcla a lo largo de su longitud. El problema es que `border-color` solo admite colores, no imágenes, así que no hay una propiedad única para esto. En su lugar dibujas el degradado en otro sitio y muestras solo una banda fina de él. Hay cuatro formas fiables de hacerlo, y la correcta depende de dos preguntas: ¿tiene el elemento esquinas redondeadas? y ¿necesita el interior ser transparente?

| Método | Esquinas redondeadas | Interior transparente | Mejor para |
| --- | --- | --- | --- |
| `border-image` | No | Sí | Tarjetas rectas, separadores, tablas |
| Dos fondos | Sí | No, necesita un relleno liso | La mayoría de tarjetas y botones |
| Máscara en un pseudoelemento | Sí | Sí | Tarjetas sobre imágenes o degradados |
| Pseudoelemento detrás | Sí | No | Resplandores y anillos animados |

Elige según las dos preguntas: esquinas e interior.

- De violeta a cian: `linear-gradient(135deg, #7c3aed, #22d3ee)`
- De mandarina a magenta: `linear-gradient(135deg, #f97316, #db2777)`
- De lima a verde azulado: `linear-gradient(135deg, #a3e635, #0d9488)`
- Borde plateado: `linear-gradient(135deg, #e5e7eb, #6b7280, #f9fafb)`

Degradados que se leen bien como contornos finos. La saturación alta importa más en una línea de 2px que en un fondo entero.

## Método 1: border-image

`border-image` acepta cualquier imagen, incluido un degradado. Fija un ancho y un estilo de borde, después el degradado y luego un slice de `1`, que le dice al navegador que use la imagen entera como borde. Son dos líneas, funciona en todas partes y deja intacto el interior del elemento.

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

El borde con degradado más corto. El `1` es el valor de slice; sin él, el borde solo se dibuja en las esquinas.

> **Sin esquinas redondeadas** Con `border-image`, `border-radius` sigue recortando el fondo, pero el borde en sí sigue recto. Si el elemento debe ser redondeado, usa uno de los otros métodos.

## Método 2: dos fondos con background-clip

Dale al elemento un borde transparente y apila después dos fondos. La capa superior es el relleno interior, recortado al `padding-box`, así que se detiene en el borde interior del borde. La capa inferior es el degradado, recortado al `border-box`, así que se extiende por debajo del borde. Donde se detiene el relleno se ve el degradado, y sigue a la perfección el `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;
}
```

El relleno se escribe como un degradado de un solo color porque solo las imágenes pueden apilarse así.

Este es el método que conviene usar por defecto. Su único límite es que el interior debe ser opaco, ya que un relleno transparente dejaría ver el degradado por toda la tarjeta. Para tarjetas sobre un color de página liso, eso no es ningún límite: usa el color de la página como relleno.

> **Por qué importa la forma abreviada** Escribir `border-box` una vez en la abreviatura `background` fija tanto `background-origin` como `background-clip`, así que el degradado toma el tamaño del borde exterior. Si solo fijas `background-clip: border-box` en forma desglosada, el degradado toma el tamaño del padding box y se repite bajo el borde, dejando finas rendijas del color equivocado a lo largo de los bordes.

## Método 3: la técnica de máscara para interiores transparentes

Cuando la tarjeta está sobre una foto u otro degradado, necesitas que el centro sea transparente. Pon el degradado en un pseudoelemento que cubra la tarjeta, dale un padding igual al ancho del borde y enmascáralo con dos capas: una que cubra solo el content box y otra que cubra todo. Excluir una de la otra deja visible solo el anillo 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 anillo con degradado y centro transparente. El par con prefijo cubre WebKit antiguo; la línea estándar `mask` cubre todo lo actual.

`pointer-events: none` evita que el pseudoelemento se trague los clics destinados al contenido de la tarjeta. La [referencia de mask-composite de MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/mask-composite) explica las palabras clave de composición. Este es el método que hay detrás de la mayoría de las tarjetas de [glassmorphism](https://gradiently.design/es/guide/glassmorphism) con bordes luminosos.

## Método 4: un pseudoelemento detrás, para resplandores y animación

Coloca un pseudoelemento con degradado algo mayor que la tarjeta, detrás de su contenido, y cubre el centro con un segundo pseudoelemento que lleve el relleno liso de la tarjeta. El borde visible es el degradado. Como el degradado vive en su propia capa, puedes desenfocar una copia para un resplandor o girarla.

```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 borde con degradado animado. El `--angle` registrado permite al navegador interpolar con suavidad el ángulo inicial del cónico, y `::after` pinta el relleno sobre el centro.

El degradado del anillo giratorio: `conic-gradient(from 0deg, #7c3aed, #22d3ee, #f472b6, #7c3aed)`

Repetir el primer color al final oculta la costura al girar. Los [degradados cónicos CSS](https://gradiently.design/es/guide/css-conic-gradient) cubren la función en profundidad.

El radio exterior debe ser igual al radio interior más el ancho del borde, y por eso el pseudoelemento usa 18px alrededor de una tarjeta de 16px. Para más formas de dar movimiento a los degradados, mira los [degradados animados en CSS](https://gradiently.design/es/guide/css-animated-gradient).

## Consejos de diseño para bordes con degradado

### Evita

- Bordes con degradado en todas las tarjetas de una cuadrícula
- Degradados poco saturados en una línea de 1px, que se leen como gris
- Un borde con degradado y un relleno con degradado en el mismo elemento
- Anillos que giran rápido sobre contenido que la gente necesita leer

### Haz

- Reserva el borde con degradado para un elemento destacado, como un plan recomendado
- Usa 2px o más y puntos saturados
- Un relleno sereno con un borde vivo, o al revés
- Rotación lenta, en pausa con movimiento reducido

Los bordes con degradado funcionan mejor como énfasis. La misma lógica se aplica a los botones, que trata [botones con degradado en CSS](https://gradiently.design/es/guide/css-gradient-button).

## FAQ

### ¿Cómo hago un borde con degradado en CSS?

La forma más rápida es `border: 3px solid; border-image: linear-gradient(135deg, #7c3aed, #22d3ee) 1;`. Para esquinas redondeadas, usa dos fondos recortados a `padding-box` y `border-box`.

### ¿Por qué no funciona border-radius con border-image?

Según la especificación, un borde dibujado con `border-image` no se redondea con `border-radius`. Usa el método de background-clip o el de máscara para bordes degradados redondeados.

### ¿Cómo hago un borde con degradado con fondo transparente?

Usa la técnica de máscara: un pseudoelemento con el degradado, padding igual al ancho del borde y una máscara que excluya su content box.

### ¿Cómo animo un borde con degradado?

Registra un ángulo con `@property`, úsalo como ángulo `from` de un degradado cónico en un pseudoelemento y anima esa propiedad de 0deg a 360deg.

### ¿Qué método de borde con degradado debo usar?

Usa dos fondos para la mayoría de las tarjetas y botones redondeados, `border-image` para bordes rectos y la técnica de máscara solo cuando el interior deba seguir transparente.