DEV Community

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

Posted on • Updated on

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!

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 😊