MTVBorders

by sanford

HTML

<DIV id="boxen"></div>

CSS

#boxen {
    background:white;
    outline: 2px solid transparent;
    outline-offset: -2px;
    font-size:10px;
    width: 200px;
    height: 200px;
    border-top: 2px dotted gray;
    border-left: 2px dotted gray;
    border-right: 1em solid  gray;
    border-bottom: 1em solid gray;
    position: relative;
    transition: all ease-out 420ms;
    -webkit-transition: all ease-out 420ms;
}
#boxen:hover {
    border-color: darkblue;
    outline-color: darkblue;
    border-right-width:24px;
    border-bottom-width:24px;
    font-size: 24px;
}
#boxen:after,#boxen:before {
    height:0px;
    width: 0px;
    content: "";
    position:absolute;
}    
#boxen:after {
    border-right: 1em solid transparent;
    border-bottom: 1em solid white;
    bottom: -1em;
    left: -2px;
    
}
#boxen:before {
    border-right: 1em solid white;
    border-bottom: 1em solid transparent;
    right: -1em;
    top: -2px;
    
}