.border-hover,
.border-hover-1 {
    position: relative;
    isolation: isolate;
}

.border-hover::before,
.border-hover-1::before {
    content: "";
    position: absolute;
    inset: 0;
    padding: 2px; /* толщина бордера */
    background: linear-gradient(0.358turn, rgba(75,71,255,1) 0%, rgba(45,43,153,1) 100%);
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    opacity: 0;
    transition: opacity .35s ease;
    pointer-events: none;
    z-index: 1;
}

.border-hover::before   { border-radius: 20px; }
.border-hover-1::before { border-radius: 12px; }

.border-hover:hover::before,
.border-hover-1:hover::before {
    opacity: 1;
}
</style>