CSS Snippet:
Chasing Border Container
This CSS snippet creates an animated “chasing” border that travels smoothly around a container, following the shape of the element rather than cutting across it.
Unlike typical gradient or rotation effects, this uses clip-path animation to simulate a single moving segment that wraps around the border, creating a clean, modern, and highly interactive UI effect.
It’s subtle enough to feel premium, but distinctive enough to stand out.
Difficulty:
Intermediate
Live preview
Chasing Border
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Use case
Use this container when you want to draw attention to a section without overwhelming the design.
It works particularly well for:
• Featured content blocks
• Pricing cards or key offers
• Highlighted sections on landing pages
• Interactive UI elements
Because the animation is continuous and controlled, it adds movement without feeling distracting.
Where to apply it
Apply this class to a container that wraps your content.
You can place anything inside it:
• Text blocks
• Buttons
• Forms
• Cards or layouts
This style works best when used sparingly on important sections rather than across every container on the page.
Notes & Setup
Select your container in Wix Studio.
Add the class: chasing-border-container
Paste the CSS into your site's Custom CSS section.
You can adjust the padding and border radius to match your layout, but keep the same values applied to both the container and the animation to maintain alignment.
This effect works best on white or light containers so the animated border remains clearly visible.
Customisation
Speed:
To speed up or slow down the animation, adjust the timing value:
animation: chaseBorder 2.8s linear infinite;
Lower values = faster movement
Higher values = slower, more premium feel
For example:
• 2s = fast and energetic
• 3–4s = smooth and premium
• 5s+ = subtle and minimal
Snake Length:
Control how long the moving segment appears by adjusting the percentage values:
90% = shorter segment
80% = longer segment
Reducing the percentage increases the visible length of the border.
Colours:
Update the border colours in the keyframes:
border-color: #6366f1;
You can use a single colour for a clean look, or multiple colours for a gradient-style effect.
Border Thickness:
Adjust the border thickness here:
border: 3px solid;
Increase for a stronger visual effect, or reduce for something more subtle.
Tip:
This effect is designed to highlight important content. Using it sparingly will make it feel intentional and high-end rather than distracting.
Licensing
This CSS snippet is free to use in personal and commercial Wix Studio projects. You’re welcome to copy, adapt, and use it on client or business websites.
Credit is not required, but if you found it useful, we’d really appreciate a small link back to Wix Doctor, ideally on your site’s footer, about page, credits page or wherever feels appropriate.
Linking back helps more Wix users discover the library and supports the continued creation of free snippets, tutorials, and community resources.
CSS Code
css
.chasing-border-container {
position: relative;
padding: 24px 28px;
border-radius: 20px;
background: #ffffff;
}
.chasing-border-container::before {
content: "";
position: absolute;
inset: 0;
border: 3px solid #06b6d4;
border-radius: 20px;
pointer-events: none;
animation: chaseBorder 2.8s linear infinite;
}
@keyframes chaseBorder {
0%, 100% {
clip-path: inset(0 0 90% 0 round 20px);
border-color: #6366f1;
}
12.5% {
clip-path: inset(0 0 45% 45% round 20px);
}
25% {
clip-path: inset(0 0 0 90% round 20px);
border-color: #06b6d4;
}
37.5% {
clip-path: inset(45% 0 0 45% round 20px);
}
50% {
clip-path: inset(90% 0 0 0 round 20px);
border-color: #ec4899;
}
62.5% {
clip-path: inset(45% 45% 0 0 round 20px);
}
75% {
clip-path: inset(0 90% 0 0 round 20px);
border-color: #8b5cf6;
}
87.5% {
clip-path: inset(0 45% 45% 0 round 20px);
}
}
