Unique CSS Border Animation Without Any Javascript

By: The Softorax Development Team

Hi, welcome to Softorax, the best web development agency worldwide. Today we will be looking at one of the most painful aspect of CSS, “Border Animation in CSS.” By using unique and outstanding borders you can turn your website more appealing to the visitors. But hmmm… we all know CSS borders can only be a solid color, right? Well, yes. But by using some creative CSS tricks, we can take our border game one step further.

As we’ve discussed before, border animation in CSS can be surprisingly difficult. Other than using some common transitions, width, color it’s not really very easy to animate a border in CSS. This is where alternatives like pseudo elements come in handy.

In this tutorial, you will learn a very unique border animation in CSS. Let’s dive in.

HTML

				
					<div class="special-border">
        <h1>Softorax</h1>
    </div>

The HTML structure above shows a basic div that has the name “special-border” along with some text inside. This is what we going to use our styling to animate the border in CSS.

CSS

				
					body {
    min-height: 100vh;
    align-items: center;
    justify-items: center;
    align-content: center;
    background: #121212;
}

.special-border {
    position: relative;
    font-family: 'Courier New', Courier, monospace;
    font-size: 12px;
    color: #FFFFFF;
    background: #16113C;
    padding: 50px;
    border-radius: 10px;
}

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

.special-border::after, .special-border::before {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    background-image: conic-gradient(from var(--angle) at 50% 50%, #FF700000 80%, #FF7000FF 100%);
    z-index: -1;
    animation: spin 5s linear infinite;
}

.special-border::before {
    filter: blur(5px);
    
}

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

    to {
        --angle: 360deg;
    }
}

Here, the animation is done by using pseudo elements (::before & ::after). Later @keyframes property was used along with animation to get the CSS animated border effect.

Final Result

Softorax

And just like that you learned an alternative way to animate a border in CSS.

In most cases using the basic border is just enough. But in some design cases you have to make it stand out. And now you with your newly gained knowledge, you can easily implement CSS border animation without the use of any javascript.

The Best WordPress Web Development Agency