Is it possible to make a torn paper effect on edges of a picture?

Question

Update 3

I updated the code (http://codepen.io/anon/pen/VYRJLp) and now the edges look really like torn paper effect. It uses SVG by the way.

The

Answer 1

I was able to do this with CSS using border image slicing.

Here's the code:

body {
    background-image: url("https://i.postimg.cc/jdRfmPxv/1-2-OKX1nhs-Z3-CB2-Cid-Edh-Jw.png");
}
.border {
  border-width: 20px 0 20px 0;
  border-style:solid;
  border-image: url(https://i.postimg.cc/DZYqPDTD/bordernew.png) 50 0 50 0 repeat;
  -webkit-border-image: url(https://i.postimg.cc/DZYqPDTD/bordernew.png) 50 0 50 0 repeat;
  -moz-border-image: url(https://i.postimg.cc/DZYqPDTD/bordernew.png) 50 0 50 0 repeat;
  border-image-slice: 50 0 50 0 fill;
  border-image-width: 20 0 20 0;
  width: 100%;
  height: 60px;
}
.p {
  font-weight: bold;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

<div class="border" style="text-align:center;">
  <br />
  <span class="p">Coming soon...</span>
  <br />
  <br />
</div>

This gives me a height re-sizing div that always has the torn paper effect along the top and bottom. It's great for full width, but I wasn't able to figure out a decent way of doing the side edges at the same time as the top and bottom (easy to do the side edges if the top and bottom edges are straight).

I made the image in Photoshop - it's basically yellow in the middle, then torn and then transparent on the outer.

If you're not familiar with image slicing, the four numbers basically define (in order): the height in pixels of the top of the image that you want to use as the top border strip, the width in pixels for the right strip, then the bottom strip, then the left strip. The fill tells it to take the center part (which is discarded by default) and use it to fill the div between the borders.

Depending on your preferences you can have the border repeat (and get cut off at the end), round (repeat to the nearest number of full repetitions, which either compresses or stretches depending on which number it is nearer to) or stretch (stretches... although that distorts the image for this example).

It took some fiddling for me to get it to work correctly but I'm chuffed with the results. I couldn't find anyone with the same answer so thought I'd post it.

UPDATE

This feature IS supported in IE11 provided border-style:solid is specified. I use media queries to provide an alternative (shadows etc.) for IE10 and below where border-image is not supported (example on my website).

UPDATE 04/2020

It's now 2020 and it's been a few years since my original answer (I've learned a lot in 5 years). I recently did this on another project for wooden watches and stuff using a simpler method. I find the div I want to apply the border to and use either :before or :after to add the border as below. Again, the image I made in Photoshop but this time it's white > torn edge > transparent rather than coloured.

To add to the bottom:

.targetdivclass:after{
     content:" ";
     display:block;
     height: 45px;
     background-image:url('https://ecorelos.com/wp-content/uploads/2020/04/torn-border2.png');
     position:absolute;
     bottom:-15px;
    width:300%;
left:-500px;    
}

To add to the top (note that you need a flipped version of the image unless you want to transform/rotate it in CSS as well):

    .targetdivclass:before{
        content:" ";
     display:block;
     width:300%;
     height: 65px;
     background-image:url('https://ecorelos.com/wp-content/uploads/2020/04/torn-border2upside.png');
     position:absolute;
     margin-top:-80px;
     left:-500px;
       z-index:1;
}

Adjust the height, bottom, width and left to suit the image and the website. Note that if you apply this to the footer you can cause issues having a width greater than 100%, in which case you need to keep the left at zero.

This is responsive, but you can use media queries to specify different sizes and margins for mobile if necessary.

The result is the same effect that was originally requested:

Answer 2

Try this:

clip-path: polygon(3% 0, 7% 1%, 11% 0%, 16% 2%, 20% 0, 23% 2%, 28% 2%, 32% 1%, 35% 1%, 39% 3%, 41% 1%, 45% 0%, 47% 2%, 50% 2%, 53% 0, 58% 2%, 60% 2%, 63% 1%, 65% 0%, 67% 2%, 69% 2%, 73% 1%, 76% 1%, 79% 0, 82% 1%, 85% 0, 87% 1%, 89% 0, 92% 1%, 96% 0, 98% 3%, 99% 3%, 99% 6%, 100% 11%, 98% 15%, 100% 21%, 99% 28%, 100% 32%, 99% 35%, 99% 40%, 100% 43%, 99% 48%, 100% 53%, 100% 57%, 99% 60%, 100% 64%, 100% 68%, 99% 72%, 100% 75%, 100% 79%, 99% 83%, 100% 86%, 100% 90%, 99% 94%, 99% 98%, 95% 99%, 92% 99%, 89% 100%, 86% 99%, 83% 100%, 77% 99%, 72% 100%, 66% 98%, 62% 100%, 59% 99%, 54% 99%, 49% 100%, 46% 98%, 43% 100%, 40% 98%, 38% 100%, 35% 99%, 31% 100%, 28% 99%, 25% 99%, 22% 100%, 19% 99%, 16% 100%, 13% 99%, 10% 99%, 7% 100%, 4% 99%, 2% 97%, 1% 97%, 0% 94%, 1% 89%, 0% 84%, 1% 81%, 0 76%, 0 71%, 1% 66%, 0% 64%, 0% 61%, 0% 59%, 1% 54%, 0% 49%, 1% 45%, 0% 40%, 1% 37%, 0% 34%, 1% 29%, 0% 23%, 2% 20%, 1% 17%, 1% 13%, 0 10%, 1% 6%, 1% 3%);

Answer 3

You could probably achieve this effect with a png image.

The top part should be black (or whatever the color of your header), the bottom is partly transparent to create the "torn effect", and your real image will be on a lower layer (z-index) to be partly hidden.

Reply to Update2 this is what I meant

Instead of creating a complete shell (a "square" hole), you can split the four edges in four images: top, right, bottom and left.

You can make it responsive by simply repeating the image on the whole length (the "start" and "end" of the four edges must be the same) *