Custom Border Style CSS

In this demo, we will design different custom div/box/card borders using SVG patterns and CSS mask property.

HTML Markup

<div class="card waves">
  <p class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam, nesciunt quod nostrum alias, vitae quam qui doloremque odit laborum porro commodi labore praesentium voluptate? Neque illum repellendus provident consequatur totam!</p>
</div>
<div class="card border">
  <p class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam, nesciunt quod nostrum alias, vitae quam qui
  doloremque odit laborum porro commodi labore praesentium voluptate? Neque illum repellendus provident consequatur totam!</p>
</div>
<div class="card deep-wave">
  <p class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam, nesciunt quod nostrum alias, vitae quam qui
  doloremque odit laborum porro commodi labore praesentium voluptate? Neque illum repellendus provident consequatur totam!</p>
</div>
<div class="card triangle">
  <p class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam, nesciunt quod nostrum alias, vitae quam qui
  doloremque odit laborum porro commodi labore praesentium voluptate? Neque illum repellendus provident consequatur totam!</p>
</div>
<div class="card angle">
  <p class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam, nesciunt quod nostrum alias, vitae quam qui doloremque odit laborum porro commodi labore praesentium voluptate? Neque illum repellendus provident consequatur totam!</p>
</div>
<div class="card hb">
  <p class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam, nesciunt quod nostrum alias, vitae quam qui
  doloremque odit laborum porro commodi labore praesentium voluptate? Neque illum repellendus provident consequatur totam!</p>
</div>
<div class="card zig-zac">
  <p class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam, nesciunt quod nostrum alias, vitae quam qui
  doloremque odit laborum porro commodi labore praesentium voluptate? Neque illum repellendus provident consequatur totam!</p>
</div>
<div class="card building">
  <p class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam, nesciunt quod nostrum alias, vitae quam qui
  doloremque odit laborum porro commodi labore praesentium voluptate? Neque illum repellendus provident consequatur totam!</p>
</div>
<div class="card random">
  <p class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam, nesciunt quod nostrum alias, vitae quam qui
  doloremque odit laborum porro commodi labore praesentium voluptate? Neque illum repellendus provident consequatur totam!</p>
</div>

CSS Styles

.content {
  font-family: "Recursive", sans-serif;
  font-weight: 600;
  color: #fff;
  line-height: 30px;
  font-size: 1rem;
}
.card {
  position: relative;
  width: 100%;
  box-sizing: border-box;
  height: 200px;
  margin-bottom: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 50px;
}
/* Card colors */
.card.waves { background-color: #363831; }
.card.border { background-color: #f56565; }
.card.deep-wave { background-color: #3282b8; }
.card.triangle { background-color: #d9adad; }
.card.angle { background-color: #be5683; }
.card.zig-zac { background-color: #848ccf; }
.card.building { background-color: lightcoral; }
.card.hb { background-color: lightseagreen; }
.card.random { background-color: turquoise; }

.card::before, .card::after {
  position: absolute;
  content: "";
  width: 100%;
  height: 24px;
  background-color: inherit;
  /* Uncomment to active the animation */
  /* animation: animateBrd 25s infinite linear; */
}
.card::before {
  top: -24px;
}
.card::after {
  bottom: -24px;
  left: 0;
  transform: rotate(180deg);
}
/* Animation code */
/* @keyframes animateBrd {
  0% {
    mask-position: 0;
  }
  100% {
    mask-position: 100vh 0;
  }
} */
/* Add svg borders */
.card.angle::after { -webkit-mask: url(../svg/angle2.svg); mask: url(../svg/angle2.svg) }
.card.angle::before { -webkit-mask: url(../svg/angle.svg); mask: url(../svg/angle.svg) }

.card.border::after { -webkit-mask: url(../svg/border2.svg); mask: url(../svg/border2.svg) }
.card.border::before { -webkit-mask: url(../svg/border.svg); mask: url(../svg/border.svg) }

.card.building::after { -webkit-mask: url(../svg/building2.svg); mask: url(../svg/building2.svg) }
.card.building::before { -webkit-mask: url(../svg/building.svg); mask: url(../svg/building.svg) }

.card.hb::after { -webkit-mask: url(../svg/hb32.svg); mask: url(../svg/hb32.svg) }
.card.hb::before { -webkit-mask: url(../svg/hb3.svg); mask: url(../svg/hb3.svg) }

.card.deep-wave::after { -webkit-mask: url(../svg/deep-wave2.svg); mask: url(../svg/deep-wave2.svg) }
.card.deep-wave::before { -webkit-mask: url(../svg/deep-wave.svg); mask: url(../svg/deep-wave.svg) }

.card.random::after { -webkit-mask: url(../svg/random2.svg); mask: url(../svg/random2.svg) }
.card.random::before { -webkit-mask: url(../svg/random.svg); mask: url(../svg/random.svg) }

.card.triangle::after { -webkit-mask: url(../svg/triangle2.svg); mask: url(../svg/triangle2.svg) }
.card.triangle::before { -webkit-mask: url(../svg/triangle.svg); mask: url(../svg/triangle.svg) }

.card.waves::after { -webkit-mask: url(../svg/waves2.svg); mask: url(../svg/waves2.svg) }
.card.waves::before { -webkit-mask: url(../svg/waves.svg); mask: url(../svg/waves.svg) }

.card.zig-zac::after { -webkit-mask: url(../svg/Zigzac2.svg); mask: url(../svg/Zigzac2.svg) }
.card.zig-zac::before { -webkit-mask: url(../svg/Zigzac.svg); mask: url(../svg/Zigzac.svg) }

PRO Tip: Modify SVG Width, Height, View-box or Path randomly to generate random effects.