CSS Gradient Border

.card {
  display: block;
  width: 200px;
  height: 200px;
  padding: 1px;
  background-clip: content-box, border-box;
  background-image: linear-gradient(black, black), linear-gradient(to right, gray, gray);
}

.card:hover {
  background-image: linear-gradient(black, black), linear-gradient(to right, red, red);
}

Gradient Border - Code Snippet

A collection of code snippets - including serverless functions, Node.js scripts, and CSS tricks.

https://leerob.io/snippets/gradient-border