Torn Paper Edges Effect

In this tutorial, you will learn how to create a torn/ripped paper edges effect with CSS. Clip Path property is used to achieve the torn effect. Watch the video below for a detailed tutorial.

HTML

<body>
  <div class="paper">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum qui voluptates officia. Dolore sunt consequuntur cupiditate quibusdam amet dicta adipisci, illum voluptate rem explicabo accusantium sequi blanditiis. Ex, perspiciatis cumque! Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatum numquam facilis natus officia fuga, laudantium maxime quae id quo molestias labore, aperiam nostrum laboriosam laborum vitae voluptate architecto. Hic, aspernatur? </p>
  </div>
</body>

CSS

body {
  background-color: #2e3537;
  font-family: 'Arial', sans-serif;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

.paper {
  position: relative;
  background: url(//s.ytimg.com/yt/imgbin/www-refreshbg-vflC3wnbM.png) 0;
  padding: 1em;
  width: 50%;
}

.paper:before, .paper:after {
  content: '';
  position: absolute;
  height: 2px;
  width: 100%;
  left: 0;
  -webkit-clip-path: polygon(1% 0%, 4% 100%, 9% 0%, 13% 100%, 19% 1%, 21% 100%, 26% 5%, 30% 100%, 36% 2%, 43% 100%, 50% 1%, 52% 100%, 61% 0%, 69% 94%, 70% 0%, 76% 100%, 81% 0%, 84% 100%, 91% 0%, 97% 100%, 99% 3%);
}

.paper:before {
  background-color: #2e3537;
  top: 0;
}

.paper:after {
  background: url(//s.ytimg.com/yt/imgbin/www-refreshbg-vflC3wnbM.png) 0;
  bottom: -2px;
}

p {
  line-height: 25px;
}