Border Animation with the help of CSS3

Css tutorial animated border

CSS3 Tutorial : Border Animation

In this tutorial we are going to post a good animation with the help of CSS3.

Demo is given below

CSS Code for making such Animated Border

.card {
    width: 300px; 
    height: 360px;
    background-color: #030029; 
    position: relative;
    border-radius: 8px;
    display: grid;
    place-items: center;
    overflow: hidden;
.card h2 {
    font-family: system-ui;
    font-size: 2rem;
    color: #ffa3fd;
    text-transform: uppercase;
    text-align: center;
    z-index: 2;
.card::before {
    position: absolute;
    width: 150px;
    height: 140%;
    background-image: linear-gradient(
    animation: rotate 3s linear infinite;	

.card::after {
    position: absolute;
    inset: 8px;
    background-color: #030029;
    border-radius: inherit;
@keyframes rotate {
    100% {
        rotate: 360deg;

Here main key animation is rotate for 360 deg.

And HTML code to display this animation.

<div class="card">
    <h2>Border Animation</h2>

That’s it.

Do you like more CSS Tutorial ?

Leave a Reply

Your email address will not be published. Required fields are marked *

10  ×  1  =