<div class="sides-1">1. Hover me </div>
<div class="sides-2">2. Hover me </div>
<div class="sides-3">3. Hover me </div>
<div class="sides-4">4. Hover me </div>
<div class="sides-5">5. Hover me </div>
<div class="sides-6">6. Hover me </div>
<div class="sides-7">7. Hover me </div>
@property --t{
  syntax: '<percentage>';
  inherits: false;
  initial-value: 0%;
}
@property --r{
  syntax: '<percentage>';
  inherits: false;
  initial-value: 0%;
}
@property --b{
  syntax: '<percentage>';
  inherits: false;
  initial-value: 0%;
}
@property --l{
  syntax: '<percentage>';
  inherits: false;
  initial-value: 0%;
}
@property --tt{
  syntax: '<percentage>';
  inherits: false;
  initial-value: 0%;
}
@property --rr{
  syntax: '<percentage>';
  inherits: false;
  initial-value: 0%;
}
@property --bb{
  syntax: '<percentage>';
  inherits: false;
  initial-value: 0%;
}
@property --ll{
  syntax: '<percentage>';
  inherits: false;
  initial-value: 0%;
}
.sides-1 {    
  padding:8px;
  background:
    linear-gradient(currentColor 0 0) 0    0    /var(--t) 3px,
    linear-gradient(currentColor 0 0) 100% 0    /3px var(--r),
    linear-gradient(currentColor 0 0) 100% 100% /var(--b) 3px,
    linear-gradient(currentColor 0 0) 0    100% /3px var(--l);
  background-repeat:no-repeat;
  transition: --l .2s,--b .2s .2s,--r .2s .4s,--t .2s .6s;
  transition-timing-function: linear;
}
.sides-1:hover {  
    --t:100%;
    --r:100%;
    --b:100%;
    --l:100%;
  transition: --t .2s,--r .2s .2s,--b .2s .4s,--l .2s .6s;
 }

 .sides-2 {    
  padding:8px;
  background:
    linear-gradient(currentColor 0 0) 100% 0    /var(--t) 3px,
    linear-gradient(currentColor 0 0) 100% 100% /3px var(--r),
    linear-gradient(currentColor 0 0) 0    100% /var(--b) 3px,
    linear-gradient(currentColor 0 0) 0     0 /3px var(--l);
  background-repeat:no-repeat;
  transition: --t .2s,--r .2s .2s,--b .2s .4s,--l .2s .6s;
  transition-timing-function: linear;
}
.sides-2:hover {  
    --t:100%;
    --r:100%;
    --b:100%;
    --l:100%;
  transition: --l .2s,--b .2s .2s,--r .2s .4s,--t .2s .6s;
 }

.sides-3 {    
  padding:8px;
  background:
    linear-gradient(90deg,currentColor 50%,#0000 0) 100% 0,
    linear-gradient(currentColor 0 0) 100% 0 ,
    linear-gradient(-90deg,currentColor 50%,#0000 0) 0% 100%,
    linear-gradient(currentColor 0 0) 0 100%;
  background-size: 200% 3px,3px 0%; 
  background-repeat:no-repeat;
  transition: .3s,background-position .3s .3s;
}
.sides-3:hover {  
  background-position: 0 0,100% 0,100% 100%,0 100%;
  background-size:200% 3px,3px 100%;
  transition: .3s,background-size .3s .3s;
 }

 .sides-4 {    
  padding:8px;
  background:
    linear-gradient(-90deg,currentColor 50%,#0000 0) 0 0,
    linear-gradient(currentColor 0 0) 0 0 ,
    linear-gradient(90deg,currentColor 50%,#0000 0) 100% 100%,
    linear-gradient(currentColor 0 0) 100% 100%;
  background-size: 200% 3px,3px 0%; 
  background-repeat:no-repeat;
  transition: .3s,background-size .3s .3s;
}
.sides-4:hover {  
  background-position: 100% 0,0 0,0 100%,100% 100%;
  background-size:200% 3px,3px 100%;
  transition: .3s,background-position .3s .3s;
 }

  .sides-5 {    
  padding:8px;
  background:
    linear-gradient( 90deg,currentColor 50%,#0000 0) 100% 0,
    linear-gradient(180deg,currentColor 50%,#0000 0) 0 100%,
    linear-gradient(currentColor 0 0) 100% 0 ,
    linear-gradient(currentColor 0 0) 0 100%;
  background-size: 200% 3px,3px 200%,3px 0%,0% 3px; 
  background-repeat:no-repeat;
  transition: .3s,background-position .3s .3s;
}
.sides-5:hover {  
  background-position: 0 0,0 0,100% 0,0 100%;
  background-size: 200% 3px,3px 200%,3px 100%,100% 3px; 
  transition: .3s,background-size .3s .3s;
 }
 .sides-6 {    
  padding:8px;
  background:
    linear-gradient(-90deg,currentColor 50%,#0000 0) 0 0,
    linear-gradient(  0deg,currentColor 50%,#0000 0) 0 0,
    linear-gradient(currentColor 0 0) 100% 100%,
    linear-gradient(currentColor 0 0) 100% 100%;
  background-size: 200% 3px,3px 200%,3px 0%,0% 3px; 
  background-repeat:no-repeat;
  transition: .3s,background-size .3s .3s;
}

.sides-6:hover {  
  background-position: 100% 0,0 100%,100% 0,0 100%;
  background-size: 200% 3px,3px 200%,3px 100%,100% 3px; 
  transition: .3s,background-position .3s .3s;
 }

.sides-7 {
  --m:4px;
  --s:3px;
  padding:15px;
  background:
    linear-gradient(currentColor 0 0) calc(var(--m) + var(--s)) 0 /var(--t) var(--s),
    linear-gradient(currentColor 0 0) 100% 0    /var(--s) var(--r),
    linear-gradient(currentColor 0 0) 100% 100% /var(--b) var(--s),
    linear-gradient(currentColor 0 0) 0 calc(100% + (var(--m) + var(--s)))   /var(--s) var(--l),

    linear-gradient(currentColor 0 0) calc(-1*(var(--s) + var(--m))) calc(var(--s) + var(--m))/var(--tt) var(--s),
    linear-gradient(180deg,currentColor calc(100% - 2*(var(--s) + var(--m))),#0000 0) calc(100% - (var(--s) + var(--m)))  calc(var(--s) + var(--m)) /var(--s) var(--rr),
    linear-gradient(-90deg,currentColor calc(100% - 2*(var(--s) + var(--m))),#0000 0) calc(100% - (var(--s) + var(--m)))  calc(100% - (var(--s) + var(--m))) /var(--bb) var(--s),
    linear-gradient(currentColor 0 0) calc(var(--s) + var(--m))  calc(100% - (var(--s) + var(--m))) /var(--s) var(--ll);
  background-repeat:no-repeat;
  transition: --t .2s 1.4s,--r .2s 1.2s,--b .2s 1s,--l .2s .8s,--tt .2s .6s,--rr .2s .4s,--bb .2s .2s,--ll .2s;
  transition-timing-function: linear;
}
.sides-7:hover {  
    --t:100%;
    --r:100%;
    --b:100%;
    --l:100%;
    
    --tt:100%;
    --rr:100%;
    --bb:100%;
    --ll:100%;
  transition: --t .2s,--r .2s .2s,--b .2s .4s,--l .2s .6s,--tt .2s .8s,--rr .2s 1s,--bb .2s 1.2s,--ll .2s 1.4s;
 } 
/**/
[class] {
  display:inline-block;
  font-size:40px;
  font-family:sans-serif;
  margin:25px;
  cursor:pointer;
}
div[class]:nth-child(odd) {
  color:darkblue;
}
body {
  text-align:center;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.