Create Wavy Borders In Css For Top And Bottom Borders

I'm trying to create a wavy top and bottom border like the image here I tried recreating the same effect using the following code .wave{ background: white; height: 25px; pos

Solution 1:

Try using this:

.wave-top {
  position: relative;
  margin-top: 20px;
}

.wave-top::before,
.wave-top::after {
  border-bottom: 5px solid rgba(237, 30, 30, 1);
}

.wave-top::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 10px;
  background-size: 20px40px;
  background-image: radial-gradient(circle at 10px -15px, transparent 20px, rgba(237, 30, 30, 1) 21px);
}

.wave-top::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 15px;
  background-size: 40px40px;
  background-image: radial-gradient(circle at 10px26px, rgba(237, 30, 30, 1) 20px, transparent 21px);
}

.wave-mid {
  background-color: rgba(237, 30, 30, 1);
  height: 50px;
}

.wave-bottom {
  position: relative;
}

.wave-bottom::before,
.wave-bottom::after {
  border-top: 5px solid rgba(237, 30, 30, 1);
}

.wave-bottom::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 10px;
  background-size: 20px40px;
  background-image: radial-gradient(circle at 10px -15px, transparent 20px, #fff21px);
}

.wave-bottom::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 15px;
  background-size: 40px40px;
  background-image: radial-gradient(circle at 10px26px, #fff20px, transparent 21px);
}

<divclass='wave-top'></div><divclass="wave-mid"></div><divclass="wave-bottom"></div>

You can increase the height of the middle-div according to your need. Here I have kept it 50px