html, body {
    width: 100%;
    height: 100%;
    display: flex;
}

:root {
    --borderColor: #03A9F3;
}

div {
    position: relative;
    width: 140px;
    height: 64px;
    margin: auto;
    border: 1px solid #03A9F3;
    cursor: pointer;
    
    &::before,
    &::after {
        content: "";
        position: absolute;
        width: 20px;
        height: 20px;
        transition: .3s ease-in-out;
    }
    
    &::before {
        top: -5px;
        left: -5px;
        border-top: 1px solid var(--borderColor);
        border-left: 1px solid var(--borderColor);
    }
    
    &::after {
        right: -5px;
        bottom: -5px;
        border-bottom: 1px solid var(--borderColor);
        border-right: 1px solid var(--borderColor);
    }
    
    &:hover::before,
    &:hover::after {
        width: calc(100% + 9px);
        height: calc(100% + 9px);
    }
}