.home-heading {
    width: 240;
    height: 240;
    padding: 20px;
    transition: padding 0.5s;
}
.home-heading:hover {
    padding: 0px;
}
.home-box:hover {
    --border-size: 3px;
    --border-angle: 0turn;
   
    background-image: conic-gradient(from var(--border-angle), rgb(255, 255, 255), rgb(255, 255, 255) 100%, #213), conic-gradient(from var(--border-angle), transparent 20%, #08f, #f03);
    background-size: calc(100% - (var(--border-size) * 2)) calc(100% - (var(--border-size) * 2)), cover;
    background-position: center center;
    background-repeat: no-repeat;
    -webkit-animation: bg-spin 3s linear infinite;
            animation: bg-spin 3s linear infinite;
  }
  @-webkit-keyframes bg-spin {
    to {
      --border-angle: 1turn;
    }
  }
  @keyframes bg-spin {
    to {
      --border-angle: 1turn;
    }
  }

@property --border-angle {
syntax: "<angle>";
inherits: true;
initial-value: 0turn;
}