How to make border animation using HTML and CSS

3 min readApr 15, 2024

Animations in web design may bring a website to life and add personality, making it more engaging and visually appealing.

Borders are a commonly ignored feature of animation. While borders are normally static, CSS allows you to bring them to life with animations. In this blog, we are going to create smooth animation effect for borders. This effect is very popular and commonly used in each website.

Animated Border using HTML and CSS — Border Animation — Animated Border using HTML and CSS

Let’s do it.

To begin, let’s set up the HTML structure. We’ll create a <div> element with a class of container that will use as relative parent (It will hide all overflow using overflow: hidden; in CSS styles and it’s padding will be the border width.) and another a <div> element with a class animated-border that we'll use to apply our CSS styles. Add all other your content into container.

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Border Animation</title>
</head>

<body>
    <div id="container">
        <div class="animated-border"></div>
        <button id="followBtn">Follow me</button>
    </div>
</body>

</html>

Next, let’s dive into the CSS to create the animated border effects. We’ll utilize keyframes to define the animation behavior.

.animated-border {
    width: 250%;
    height: 350%;
    position: absolute;
    z-index: -10;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: conic-gradient(transparent, transparent, transparent, red, orange, transparent, transparent, transparent);
    animation: rotate 5s infinite linear;
}

@keyframes rotate {
    0% {
        transform: translate(-50%, -50%) rotate(0deg);
    }

    100% {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

Here is full css:

body {
    padding: 0;
    margin: 0;
    background-color: #2d2d2d;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
}

#container {
    position: relative;
    overflow: hidden;
    padding: 5px;
    border-radius: 6px;
}

#followBtn {
    font-size: 32px;
    padding: 15px 40px;
    border: none;
    border-radius: 6px;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    background-color: white;
    color: #2d2d2d;
    cursor: pointer;
}

.animated-border {
    width: 250%;
    height: 350%;
    position: absolute;
    z-index: -10;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: conic-gradient(transparent, transparent, transparent, red, orange, transparent, transparent, transparent);
    animation: rotate 5s infinite linear;
}

@keyframes rotate {
    0% {
        transform: translate(-50%, -50%) rotate(0deg);
    }

    100% {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

Results:

Check here final results of the animation. Border is animating around the button. You can add border around anything like <button>or <div> etc.

Animated border using html and css — Result of code — Animated border using html and css

Mastering the Top 20 HTML Tags for web developers

HTML and HTML Tags

medium.com

Top 10 easy and very useful animations using CSS

Creating animations using CSS can add interactivity and visual appeal to your web projects. Here are ten easy and very…

medium.com

Conclusion:

Animating borders with CSS opens up a world of possibilities for enhancing the visual appeal of your website. By leveraging CSS animations and keyframes, you can create dynamic and eye-catching border effects that captivate your audience. Experiment with different properties and values to achieve the desired look and feel for your borders. Happy coding!

Feel free to ask any question, you can contact me here or directly https://tajammalmaqbool.com