<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="box"> <div class="box-inner"> </div> </div>

.box { width: 400px; height: 250px; margin: auto; text-align: center; color: #fff; position: relative; top: 50px; cursor: pointer; transition: 500ms ease; } .box:before { position: absolute; width: 0; height: 2px; content: ""; background: #fff; top: -2px; left: -2px; transition: 100ms width ease 300ms; -web-kit-transition: 100ms width ease 300ms; } .box:after { position: absolute; width: 2px; height: 0; content: ""; background:red; top: -2px; right: -2px; transition: 100ms height ease 200ms; -web-kit-transition: 100ms height ease 200ms; } .box-inner:after { position: absolute; width: 0; height: 2px; content: ""; background: #ccc; bottom: -2px; right: -2px; transition: 100ms width ease 100ms; -web-kit-transition: 100ms width ease 100ms; } .box-inner:before { position: absolute; width: 2px; height: 0; content: ""; background: #ccc; bottom: -2px; left: -2px; transition: 100ms height ease 0ms; -web-kit-transition: 100ms height ease 0ms; } .box:hover { border-color: transparent; } .box:hover:before { width: 402px; transition: 100ms width ease 0ms; -web-kit-transition: 100ms width ease 0ms; } .box:hover:after { height: 252px; transition: 100ms height ease 100ms; -web-kit-transition: 100ms height ease 100ms; } .box:hover .box-inner:after { width: 402px; transition: 100ms width ease 200ms; -web-kit-transition: 100ms width ease 200ms; } .box:hover .box-inner:before { height: 252px; transition: 100ms height ease 300ms; -web-kit-transition: 100ms height ease 300ms; }