JSFiddle - React, Tailwind, and code Playground

HTML

<div class="c1"></div>
<div class="c2"></div>
<div class="c3"></div>
<div class="c4">border-width = 3px (Chrome 預設)</div>
<div class="c5">border-width = 10px</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;
}

.c4, .c5 {
  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;
  border-style: solid;
}

.c5 {
  border-width: 10px;
}

.c4:hover, .c5:hover{
  border-image-outset: 20;
}