CODEWITHSUNDEEP
htmlcssborderborder-image
Ashok
Ashok

Reputation: 379

Using a round image as as border image

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

enter image description here

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:

enter image description here

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

enter image description here

I am not sure what is happening and how to fix this. https://i.sstatic.net/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?

Upvotes: 3

Views: 1363

Answers (2)

Temani Afif
Temani Afif

Reputation: 272723

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" >

Upvotes: 4

Amoong
Amoong

Reputation: 171

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>

Upvotes: 1

Related Questions