CSS Border Image: rendering a frame by rotating an image

Question

I need to render a frame (ie, a picture frame around a picture) by rotating an image:

• 0 degrees for the left
• 90 for the top
• ... and so on.

As far as I can tell there isn't a border-image-left|right|top|bottom property, although this would work too - please correct me if I'm wrong.

It seems I'll need to use the border-image property. Does anyone know if possible to rotate the image depending on the side?

I guess the other messy options would include

• Creating four div's around the image
• Manually generating a frame border image (this won't really work as 1. we've got over 300 images, and 2. the frames need to be used on images with different aspect ratios... )

Edit: 'depending on the side' = 0 degrees for left, 90 degrees for top, 180 degrees for right, 240 for bottom... See image below for an example.

Left hand border image

Answer 1

Partially forced, but wrapping it in a div and span and playing with pseudo elements and transforms seemed to work. The image is wrapped in an .img-container div and a span, and the ::before and ::after elements are absolute positioned around the image.

Here's the markup:

<div class="img-container">
  <span>
    <img src="https://unsplash.it/300/300?image=200">
  </span>
</div>

And the styling:

.img-container, span, img{
  display: block;
  position: relative;
}

/* Image border general */
.img-container::before,
.img-container::after,
span::before, span::after{
  content: "";
  position: absolute;
  left: -30px;
  top: 50%;
  width: 30px;
  height: 100%;
  transform: translateY(-50%);
  background-image: url("https://i.stack.imgur.com/0UI1w.png");
  background-size: 100% 100%;
  z-index: 2;
}

/* Specific to the right border */
.img-container::after{
  left: auto;
  right: -30px;
  top: 50%;
  transform: translateY(-50%) rotate(180deg);
}

/* Top and bottom border general */
span::before,
span::after{
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%) rotate(90deg);
}

/* Just the bottom */
span::after {
  top: 100%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(270deg);
}

May be a little much

Here's a fiddle