Border Style Designs Usign CSS and SVG

Captivative custom border style designs using SVG patterns and CSS Mask property.

In this tutorial, we will explore the creation of diverse custom div/box/card borders using a combination of SVG patterns and the 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);
}

Modify SVG’s Width, Height, View-box or Path randomly to generate random effects.

Thanks for reading!