Gradient Border Card

<div class="gradient-border">
  <h3 style="margin: 0 0 12px 0; color: #333;">Gradient Border</h3>
  <p style="margin: 0; color: #666;">This card has an animated gradient border effect.</p>
</div>

.gradient-border {
  position: relative;
  padding: 24px;
  background: #fff;
  border-radius: 12px;
  max-width: 300px;
  overflow: hidden;
  z-index: 1;
}
.gradient-border::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(45deg, #ff6b6b, #4ecdc4, #45b7d1, #96ceb4, #feca57);
  background-size: 400% 400%;
  animation: gradient-rotate 3s ease infinite;
  z-index: -2;
}
.gradient-border::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  right: 2px;
  bottom: 2px;
  background: #fff;
  border-radius: 10px;
  z-index: -1;
}
@keyframes gradient-rotate {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}