Cutout box ONLY corners

by sanford

HTML

<div class="wrapper"><div class="content">Inside</div>Me</div>

CSS

body { padding: 40px;}


DIV.wrapper {
    height: 100px;
    width: 100px;
    border: none;
    border-left: 16px solid rgb(148,148,148);
    border-left: 16px solid rgba(148,148,148,.2);
    border-right: 16px solid rgb(148,148,148);
    border-right: 16px solid rgba(148,148,148,.2);  

    position: relative;
    padding-left:16px;
    padding-top:16px;
    transition:all 420ms ease-in;
    -webkit-transition:all 420ms ease-in;
   
}
DIV.wrapper:before,DIV.wrapper:after {
    outline: rgba(1,3,4,.3) solid 16px;
    outline-offset:-16px;
    content: "";
    width: 100%;
    height: 0;
    padding: 0 16px 0 16px;
    position:absolute;
    left:-16px;
    display:block;
    transition:all 420ms ease-in;
    -webkit-transition:all 420ms ease-in;

}
DIV.wrapper:after {
    border-bottom: 16px solid rgb(148,148,148);
    border-bottom: 16px solid rgba(148,148,148,.2);
    bottom:-16px;    
}
DIV.wrapper:before {
    border-top: 16px solid rgb(148,148,148);
    border-top: 16px solid rgba(148,148,148,.2);
    top:-16px;
}

DIV.wrapper:hover, DIV.wrapper:hover:after, DIV.wrapper:hover:before {
    border-color: rgb(124,10,124);
    border-color: rgba(124,10,124,.2);
}