Using a round image as as border image

Question

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 can't find a way to make this happen with the same technique. So currently for the rectangle image following styling is 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.stack.imgur.com/TOSDv.jpg 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 an easier and a better way of doing it?

Temani Afif · Answer 1 · 2021-06-12T10:55:09.103

4

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;
}

<img src="https://picsum.photos/id/1/200/200" >

<img src="https://picsum.photos/id/1/200/150" >

<img src="https://picsum.photos/id/1/150/200" >

edited Jun 12 '21 at 10:55

answered Jun 12 '21 at 09:54

Temani Afif

245,468
26
309
415

how did you come up with the 22px number? This works fine for one particular implementation but when i have to use the frame on multiple size of images and for those the frame doesnot seem to always fit the image. My shapes arenot always round and can be oval as well and it doesnot look to work there – Ashok Jun 12 '21 at 10:50
@Ashok check the update. The number I am using depend on the size of your frame and image. I doubt there is a generic solution – Temani Afif Jun 12 '21 at 10:55
The new implementation seems to work, i might have to tweak it a little for what i want. I want the frame-width to increase and decrease. When i do that now, the space between the image and frame seems to increase and decrease, is there any other param in the background property to do just that? Thanks for the help – Ashok Jun 12 '21 at 11:01

score 1 · Answer 2 · answered Jun 12 '21 at 06:47

1

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;
}

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

answered Jun 12 '21 at 06:47

Amoong

171
8

seems to work but if i wanted to make the border image have more thickness, would i have to increase the padding? – Ashok Jun 12 '21 at 07:41
@Ashok Yes, you can adjust the border thickness by changing the padding. – Amoong Jun 12 '21 at 07:52
yeah but it messes something's up. The distance between the border and the image seems to increase creating a gap in the middle. I dont think this method is very modular as i want to increase the border width without having to increase the height and width as well. – Ashok Jun 12 '21 at 08:04
@Ashok How about use `box-sizing: border-box` style to frame element? – Amoong Jun 12 '21 at 08:08
After doing that we lose control over we lose control over the width of the image. The padding just increases the gap between the border and the image. – Ashok Jun 12 '21 at 08:11
The border width method lets us have the control of the thickness and seems to be very flexible, but it is very hard to make it work with round images – Ashok Jun 12 '21 at 08:13
Ah, yes you're right. My code can't controll the border thickness without modifying the original image. – Amoong Jun 12 '21 at 08:21
Thanks for the help anyway. I am wondering if there is something called border-image-radius. The border image takes the image as a rectangle and slices it up, so the 'blue' portion on the frame seems to be the transparent section in the image – Ashok Jun 12 '21 at 08:24

Using a round image as as border image

2 Answers2