有没有办法为CSS3边框图像的每一面使用不同的图像？

<div class="border-image"></div>

.border-image {
  position: relative;
  width: 200px;
  height: 200px;
}

.border-image:before,
.border-image:after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: -1;
}

.border-image:before {
  top: -10px;
  left: -10px;
  background-image: url("top-left.png");
  border-top: 10px solid transparent;
  border-left: 10px solid transparent;
}

.border-image:after {
  bottom: -10px;
  right: -10px;
  background-image: url("bottom-right.png");
  border-bottom: 10px solid transparent;
  border-right: 10px solid transparent;
}

.border-image:before {
  background-image: url("top-right.png");
  border-top: 10px solid transparent;
  border-right: 10px solid transparent;
}

.border-image:after {
  background-image: url("bottom-left.png");
  border-bottom: 10px solid transparent;
  border-left: 10px solid transparent;
}