Gradient Border

Create a gradient border with CSS.

.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);
}
Proud member of the Weird Wide Webring.