Search code examples
htmlcsssvgcss-mask

Is there a method to ensure 100% faithful reproduction of a border-image in CSS or SVG?

Here my demo: https://codepen.io/joondoe/pen/MWwmGwG?editors=0100

In my example I am using CSS but I am open to solutions using SVG also.

I have managed to create a border-image with filling content inside. Now I am wondering if it is possible to create a 100% smooth border-image? I mean by that, a border image that automatically reproduce the original border image or nearest possible in a programmatic fashion.

In my demo you can see it is pretty OK but there still some aliasing and lags relative to the original border image. Here the original border image:

enter image description here

Here my code:

.container {
  background-color: #444;
  width: 300px;
  height: 350px;
  padding: 20;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: solid ;
  border-width:15px 30px 30px 25px;
  border-image:url( https://i.imgur.com/Z6TVgss.png)40 stretch;
 overflow:hidden;
 box-sizing:content-box; background:url(https://www.ecopetit.cat/wpic/mpic/6-67359_race-car.jpg) center/cover no-repeat content-box;
  
}

div.element {
  width: 50px;
  height: 50px; 
  mask-image: url( https://i.imgur.com/Z6TVgss.png);
  
};

div.icon-image {
  mask-size: 100% 100%;
  mask-position: 0% 0%;
  mask-repeat: no-repeat;
  display: flex;
  /* border: 1px solid orange; */
  flex-direction: column;
  align-items: center;
  justify-content: center;
 
}

div.icon-image img {
  width: 100%; 
}
<div class="container">
  <div title="" class="icon-image element"></div>
</div>

Is there way to reproduce the original border's image using only programmatic feature in CSS or SVG -percentage, filling property and all?

edit: thanks to Termani Afif for this solution. I was surprised that there was a pixel's gap on the image in the Termani Afif's anwser, so I have assumed maybe my border-image and mask wasn't aliase'free to say it like that. So I have recomposed with other image, and it works very well, here the demo: codepen.io/joondoe/pen/GRJmBQK?editors=0100

Solution

  • Here is an idea with mask. The trick is to have two images. Your initial image that will contain the border and an image1 like below:

    enter image description here

    The above image will be used to mask the area and a pseudo element with the other image will be on the top to create the border:

    .box {
  width:500px;
  height:300px;
  background:url(https://www.ecopetit.cat/wpic/mpic/6-67359_race-car.jpg) center/cover;
  -webkit-mask:url(https://i.ibb.co/D1X8D2J/ZHD6p.png) center/contain no-repeat;
          mask:url(https://i.ibb.co/D1X8D2J/ZHD6p.png) center/contain no-repeat;
  position:relative;
}
.box:before {
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background:url(https://i.sstatic.net/ZHD6p.png) center/contain no-repeat;
}


body {
  background:pink;
}
    <div class="box"></div>

    CSS mask image with border

    1 I didn't focus on the image quality. It was a fast edit to the initial image to make the inside area non-transparent. The idea is to have the border image (transparent inside) and a filled image (non-transparent inside)