Borde con degradado en CSS: cuatro formas de dibujarlo

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 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.

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

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.

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

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.

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.

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

pointer-events: none evita que el pseudoelemento se trague los clics destinados al contenido de la tarjeta. La referencia de mask-composite de MDN 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 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.

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

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.

Consejos de diseño para bordes con degradado

Los bordes con degradado funcionan mejor como énfasis. La misma lógica se aplica a los botones, que trata botones con degradado en CSS.