animated border card by using css

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Animated Border Card</title>
    <!-- Font Awesome for icons -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" />
</head>
<style>
    /* General Styles */
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    html,
    body {
        width: 100%;
        height: 100%;
        position: relative;
    }

    body {
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        background: #f1f1f1;
        height: 100vh;
        display: flex;
        flex-direction: column;
        gap: 3rem;
        justify-content: center;
        align-items: center;
        padding: 1rem;
    }

    .card {
        width: 300px;
        text-align: center;
        position: relative;
        isolation: isolate;
    }

    .card .content {
        background-color: #111;
        color: white;
        padding: 20px;
        border-radius: 12px;
    }

    @property --angle {
        syntax: "<angle>";
        inherits: false;
        initial-value: 0deg;
    }

    .card::after,
    .card::before {
        content: "";
        position: absolute;
        width: 100%;
        height: 100%;
        background: conic-gradient(from var(--angle), red, blue, purple,red);
        z-index: -1;
        border-radius: 12px;
        padding: 4px;
        /* it act as width of border*/
        /* 1st way make it center */
        /* top: 50%;
        left: 50%;
        transform: translate(-50%,-50%); */
        /* 2nd way to make it center */
        top: -4px;
        left: -4px;
        /* add animation */
        animation: rotate 3s linear infinite;
    }
    .card.card2::after,
    .card.card2::before{
         background: conic-gradient(from var(--angle), transparent,rgb(255, 157, 0));
    }

    /* add glow */
    .card::before {
        filter: blur(1.5rem);
        opacity: 0.5;
    }

    @keyframes rotate {
        from {
            --angle: 0deg;
        }

        to {
            --angle: 360deg;
        }
    }
</style>

<body>
    <div class="card">
        <div class="content">
            <h2>Animated Border Card</h2>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
        </div>
    </div>
    <div class="card card2">
        <div class="content">
            <h2>Animated Border Card</h2>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
        </div>
    </div>
</body>

</html>

/* No CSS found */

// No JS found