.live-border {
    display: inline-block;
    position: relative;
    overflow: visible;
}

.live-border .border {
    position: absolute;
    background: rgb(68, 119, 255);
    overflow: hidden;
}

.live-border .border.top {
    height: 3px;
    width: 100%;
    top: 0px;
    left: 0px;
}

.live-border .border.right {
    height: 100%;
    width: 3px;
    top: 0px;
    right: 0px;
}

.live-border .border.bottom {
    height: 3px;
    width: 100%;
    bottom: 0px;
    left: 0px;
}

.live-border .border.left {
    height: 100%;
    width: 3px;
    top: 0px;
    left: 0px;
}

.live-border .border .bar {
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgb(255, 255, 255);
    left: 0px;
    top: 0px;
    z-index: 99;
}

.live-border .border.top .bar {
    left: 100%;
    animation: live-border-animate-top 2s linear 2s infinite;
}

.live-border .border.right .bar {
    top: 100%;
    animation: live-border-animate-right 2s linear 1s infinite;
}

.live-border .border.bottom .bar {
    left: -100%;
    animation: live-border-animate-bottom 2s linear 0s infinite;
}

.live-border .border.left .bar {
    top: -100%;
    animation: live-border-animate-left 2s linear 3s infinite;
}

@keyframes live-border-animate-top {
    0%{
        left: 100%;
    }
    100%{
        left: -100%;
    }
}

@keyframes live-border-animate-right {
    0%{
        top: 100%;
    }
    100%{
        top: -100%;
    }
}

@keyframes live-border-animate-bottom {
    0%{
        left: -100%;
    }
    100%{
        left: 100%;
    }
}

@keyframes live-border-animate-left {
    0%{
        top: -100%;
    }
    100%{
        top: 100%;
    }
}