Bordes degradados en CSS

Digamos que necesitas un borde degradado alrededor de un elemento. Mi idea es la siguiente:

• No existe una API CSS simple y obvia para esto.
• Simplemente crearé un elemento contenedor con un linear-gradientfondo, luego un elemento interno bloqueará la mayor parte de ese fondo, excepto una delgada línea de relleno alrededor de él.

Quizás así:

Si odias la idea de un elemento envolvente, puedes usar un pseudoelemento, siempre y cuando un valor de índice z negativo esté bien (no lo estaría si hubiera mucho anidamiento con elementos principales con sus propios fondos) .

Aquí hay un ejemplo de Stephen Shaw de eso, abordándolo border-radiusen el proceso:

Incluso podrías colocar lados individuales como rectángulos delgados de pseudoelementos si no necesitaras los cuatro lados.

Pero no te olvides por completo de border-image, quizás la propiedad CSS más obtusa de todos los tiempos. Puedes usarlo para obtener bordes degradados incluso en lados individuales:

Usar ambos border-imagey border-image-slicees probablemente la sintaxis más sencilla posible para un borde degradado, desafortunadamente es incompatible con border-radius.

DigitialOcean documenta el mismo enfoque en otro tutorial.