*
  box-sizing: border-box

body
  display: flex
  justify-content: center
  align-items: center
  height: 100vh

  
.block
  position: relative
  padding: 20px
  width: 220px
  height: 200px
  font-size: 24px
  &:before,
  &:after
    content: ''
    position: absolute
    background: transparent
  &:before
    border-top: 1px solid #000
    width: 20px
    height: 1px
    top: 0
    left: -10px
    transition: border-top .3s ease, width .3s ease, border-right .3s ease .3s, height .3s ease .3s, left .3s ease
  &:after
    border-left: 1px solid
    width: 1px
    height: 20px
    top: -10px
    left: 0
    transition: border-left .3s ease, height .3s ease, border-bottom .3s ease .3s, width .3s ease .3s, top .3s ease
  &:hover
    &:before
      border-top: 1px solid #000
      border-right: 1px solid
      width: 100%
      height: 100%
      left: 0
    &:after
      border-bottom: 1px solid #000
      border-left: 1px solid
      width: 100%
      height: 100%
      top: 0