JSFiddle - React, Tailwind, and code Playground

HTML

<div class="c1"></div>
  <div class="c2"></div>
  <div class="c3"></div>

CSS

div {
      margin-bottom: 2em;
    }

    .c1 {
      width: 300px;
      height: 100px;
      border-image-source: url("https://developer.mozilla.org/en-US/docs/Web/CSS/border-image-slice/border-diamonds.png");
      border-image-slice: 33.3%;
      border-image-width: 30px;
      transition: 1s;
    }

    .c1:hover {
      border-image-outset: 20px;
    }

    .c2 {
      width: 300px;
      height: 100px;
      border-image-source: url("https://developer.mozilla.org/en-US/docs/Web/CSS/border-image-slice/border-diamonds.png");
      border-image-slice: 33.3%;
      border-image-width: 30px;
      border-image-outset: 0px;
      transition: 1s;
    }

    .c2:hover {
      border-image-outset: 20px;
    }

    .c3 {
      width: 300px;
      height: 100px;
      border: 3px solid red;
      transition: 1s;
    }

    .c3:hover {
      padding-right: 100px;
    }