JSFiddle - React, Tailwind, and code Playground

by GCyrillus

HTML

<div id="box">roll over me</div>

CSS

#box{
  position : relative;
  width : 100px;
  height : 100px;
  padding:5px;
 margin:1em;
  background:
    linear-gradient(to right, red , red) top left,
    linear-gradient(to right, red , red) bottom right,
    linear-gradient(to right, red , red) top left,
    linear-gradient(to right, red , red) bottom right;
  background-repeat:no-repeat;
  background-size:3px 100%, 3px 100%, 100% 3px, 100% 3px;
  transition : 500ms ease-out;
    background-color : gray;
}

#box:hover{
    background-size:3px 0%, 3px 0%, 0% 3px, 0% 3px;
}