DEV Community

Cover image for CSS: How to make a cool border animation
Lorenzo
Lorenzo

Posted on • Edited on

7 4

CSS: How to make a cool border animation

Hello World! New episode of the series - A CSS/JS trick in 5 minutes.
I did an article about CSS slow border animations and I wanted to do a follow-up. I will now explain to you how to do a more engaging and advanced border animation


We do not need to excessively style our container, we just give it padding, a border, and if you want (recommended) a border-radius. You can after insert everything you need in the div (or make it act as a button):

#container {
  border-radius: 10px;
  padding: 35px;
  width: 380px;
  overflow: hidden;
  padding: 2rem;
  animation: borderSpin 5s ease infinite;
Enter fullscreen mode Exit fullscreen mode

Inside of container style, we add a :after and :before.

 &::before {
    content: "";
    z-index: -2;
    left: -50%;
    top: -50%;
    width: 200%;
    height: 200%;
    background-color: #399953;
    background-repeat: no-repeat;
    background-size: 50% 50%, 50% 50%;
    background-position: 0 0, 100% 0, 100% 100%, 0 100%;
    background-image: linear-gradient(#399953, #399953),
      linear-gradient(#fbb300, #fbb300), linear-gradient(#d53e33, #d53e33),
      linear-gradient(#377af5, #377af5);
    animation: rotate 4s linear infinite;
  }

  &::after {
    content: "";
    position: absolute;
    z-index: -1;
    left: 6px;
    top: 6px;
    width: calc(100% - 12px);
    height: calc(100% - 12px);
    background: white;
    border-radius: 5px;
  }
}
Enter fullscreen mode Exit fullscreen mode

That's a lot of things, just notice that we are giving a colorful background to the container and with the animation we will make the border moving. You can play around with background size, position, colors, calc, radius...


In reality the animation part is very easy:

@keyframes rotate {
  100% {
    transform: rotate(1turn);
  }
}
Enter fullscreen mode Exit fullscreen mode

We are just rotating the background.


I have done 8 animation examples for you (open the link for a complete experience).

Live preview: - Check quick animation part


Hope this helped and thanks for reading!

Please smash that like button to make me understand that you want the series to continue :)

Check this article about how to write CSS like a pro!


Subscribe to my Newsletter!

A loooong, and fun, weekly recap for you
Free PDF version of my articles
Highly customizable inbox
That's --> free <-- and you help me!

Do your career a big favor. Join DEV. (The website you're on right now)

It takes one minute, it's free, and is worth it for your career.

Get started

Community matters

Top comments (2)

Collapse
 
grahamthedev profile image
GrahamTheDev

These aren't border animations though :-P

Nice article all the same so have a 💓 from me

Collapse
 
lorenzoblog profile image
Lorenzo

Thanks 😊

AWS Security LIVE!

Tune in for AWS Security LIVE!

Join AWS Security LIVE! for expert insights and actionable tips to protect your organization and keep security teams prepared.

Learn More

👋 Kindness is contagious

Immerse yourself in a wealth of knowledge with this piece, supported by the inclusive DEV Community—every developer, no matter where they are in their journey, is invited to contribute to our collective wisdom.

A simple “thank you” goes a long way—express your gratitude below in the comments!

Gathering insights enriches our journey on DEV and fortifies our community ties. Did you find this article valuable? Taking a moment to thank the author can have a significant impact.

Okay