Using a round image as as border image

Question

Ok so i want to use a roundish image as a border image to cover the whole outer part of an image. You can see two images below one of them being rectangle and the other one being round. I was able to figure out how to use the rectangle image to perfectly fit the given image, but now i am trying to use the same technique to fit the circular image as the border and i cannot find a way to make this happen with the same technique. So currently for the rectangle image these stlyes are being used:

.frame{
    height: 192px;
    width: 160px;
    border-width: 30.4px 32px;
    border-image: url("/images/frame-4.png") 100 / 1.6 / 0 stretch;
}

Now to use the circular image as border and place the image inside, i am using border-radius on the frame class.

.frame{
    border-radius: 111px;
    height: 192px;
    width: 160px;
    border-color: red;
    border-width: 16px;
    background: blue;
    /* border-image: url("/images/frame-5.png") 100 / 1 / 0 stretch; */
}

When i use a border color everything looks fine

But when i turn on the border image things start to fall apart

I am not sure what is happening and how to fix this. https://i.imgur.com/erDQcs5.png here is the image link if anyone want to give this a try. Since i want the border image to perfectly wrap the image, i thought that border images are the best way of doing it instead of using multiple div. Is there is an easier and a better way of doing this? Any help is appreciated.

user_8620333 · Answer

You can simply do like below. A transparent border and your frame as background:

img {
  border-radius:50%;
  border:19px solid transparent;
  background:url(https://i.imgur.com/erDQcs5.png) center/100% 100% border-box;
}

user_9738214 · Answer

Hmm... How about this?

I think this isn't perpect solution but this works fine.

I used background-image and padding instead of border-image.

In child element(contents), I used border-radius: inherit.

If you want test example code, please put the right url for images.

.border-image {
  border-radius: 111px;
  height: 192px;
  width: 160px;
  background-image: url("frame");
  background-size: 100% 100%;
  padding: 20px;
}

.contents {
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background-image: url("url");
  background-repeat: no-repeat;
  background-size: cover;
}

Using a round image as as border image

2 Answers