Back to Components

Wave Border

Animated wave effect flowing around element borders. Creates an organic, fluid boundary that pulses and moves.

Morphing Border Animation

Live Preview

Wave

HTML

<div class="wave-border">Wave</div>

CSS

.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%; }
}