Animated Gradient Border Generator

Hello
Card Width200px
Card Height200px
Card Radius16px
Border Width8px
Border Fill150px
Card Color#000000
HTML&CSS Code
<style>
    .card {
        --card-height: 200px;
        --card-width: 200px;
        --card-radius: 16px;
        --border-width: 8px;
        --border-fill: 150px;
        --border-height: 482px;
  
        --card-color: #000000;
  
        position: relative;
        height: var(--card-height);
        width: var(--card-width);
        background: var(--card-color);
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: hidden;
        z-index: 1;
        border-radius: var(--card-radius);
    }
  
    .card::before {
        content: "";
        height: var(--border-height);
        width: var(--border-fill);
        background: linear-gradient(90deg, red, blue);
        position: absolute;
        z-index: 2;
        animation: rotate 3.5s linear infinite;
    }
  
    @keyframes rotate {
        from {
            transform: rotateZ(1deg);
        }
  
        to {
            transform: rotateZ(360deg);
        }
    }
  
    .card::after {
        content: "";
        height: calc(var(--card-height) - var(--border-width));
        width: calc(var(--card-width) - var(--border-width));
        background: var(--card-color);
        position: absolute;
        z-index: 2;
        border-radius: var(--card-radius);
    }
  
    .card-content {
        z-index: 3;
        font-size: 16px;
        font-family: system-ui;
        font-weight: bold;
        color: white;
        position: absolute;
    }
  </style>
  
  <div class="card">
    <div class="card-content">Hello</div>
  </div>