Animated wave effect flowing around element borders. Creates an organic, fluid boundary that pulses and moves.
<div class="wave-border">Wave</div>
.wave-border {
width: 150px;
height: 150px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
font-weight: 700;
color: #667eea;
position: relative;
background: white;
border-radius: 20px;
}
.wave-border::before {
content: '';
position: absolute;
inset: -4px;
background: linear-gradient(45deg, #667eea, #764ba2, #667eea);
border-radius: 20px;
z-index: -1;
animation: waveRotate 3s linear infinite;
background-size: 200% 200%;
}
@keyframes waveRotate {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}