Wave Border in CSS

Wavy shape with css

I'm not sure it's your shape but it's close - you can play with the values:

https://jsfiddle.net/7fjSc/9/

#wave {

  position: relative;

  height: 70px;

  width: 600px;

  background: #e0efe3;

}

#wave:before {

  content: "";

  display: block;

  position: absolute;

  border-radius: 100% 50%;

  width: 340px;

  height: 80px;

  background-color: white;

  right: -5px;

  top: 40px;

}

#wave:after {

  content: "";

  display: block;

  position: absolute;

  border-radius: 100% 50%;

  width: 300px;

  height: 70px;

  background-color: #e0efe3;

  left: 0;

  top: 27px;

}

<div id="wave"></div>

Wave border in CSS

It's relatively easy to draw a border like that with a couple of pseudo-elements.

First we draw the bottom of the wave:

.wave{

  background:

    linear-gradient(to right, sandybrown, chocolate);

  height: 50px;

  position: relative;

}

.wave::before{

  content: "";

  position: absolute;

  left: 0;

  bottom: 0;

  right: 0;

  background-repeat: repeat;

  height: 10px;

  background-size: 20px 20px;

  background-image:

    radial-gradient(circle at 10px -5px, transparent 12px, maroon 13px);

}

<div class='wave'></div>

Create wavy borders in CSS for top and bottom borders

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: 20px 40px;

  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: 40px 40px;

  background-image: radial-gradient(circle at 10px 26px, 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: 20px 40px;

  background-image: radial-gradient(circle at 10px -15px, transparent 20px, #fff 21px);

}

.wave-bottom::after {

  content: "";

  position: absolute;

  left: 0;

  right: 0;

  bottom: 0;

  height: 15px;

  background-size: 40px 40px;

  background-image: radial-gradient(circle at 10px 26px, #fff 20px, transparent 21px);

}

<div class='wave-top'></div>

<div class="wave-mid"></div>

<div class="wave-bottom"></div>

How can I create a wavy shape CSS?

I have an online generator for the below code: https://css-generators.com/wavy-shapes/

---

Here is an idea with radial-gradient and CSS variables where you can easily control the shape:

.wave {
  --c:red;   /* Color */
  --t:5px;   /* Thickness */
  --h:50px;  /* Height (vertical distance between two curve) */
  --w:120px; /* Width  */
  --p:13px;  /* adjust this to correct the position when changing the other values*/
  
  background:
    radial-gradient(farthest-side at 50% calc(100% + var(--p)), #0000 47%, var(--c) 50% calc(50% + var(--t)),transparent calc(52% + var(--t))),
    radial-gradient(farthest-side at 50% calc(0%   - var(--p)), #0000 47%, var(--c) 50% calc(50% + var(--t)),transparent calc(52% + var(--t)));
    
  background-size: var(--w) var(--h);
  background-position: calc(var(--w)/2) calc(var(--h)/2),0px calc(var(--h)/2);
  
  
  border:1px solid;
  margin:5px 0;
  display:inline-block;
  width:300px;
  height:150px;
}

<div class="wave"></div>

<div class="wave" style="--w:200px;--h:40px;--p:10px; --t:8px;--c:purple"></div>

<div class="wave" style="--w:80px ;--h:20px;--p:5px;  --t:3px;--c:blue;"></div>

<div class="wave" style="--w:100px;--h:30px;--p:14px;--t:10px;--c:green;"></div>

SVG to make a wave effect border and allow it to stretch horizontally only

Simply add preserveAspectRatio="none"

.page {
  height: 400px;
  width: 100%;
  background: green;
}

.pls-sticky-header {
  position: relative;
  height: 150px;
  background-color: red;
}

.wave {
  position: absolute;
  bottom: 0;
  height:30%;
  left: 0;
  width: 100%;
}

<div class="page">
  <div class="pls-sticky-header">
    <svg viewBox="0 0 1440 200" class="wave" preserveAspectRatio="none">
        <path fill="#ffffff" fill-opacity="1" d="M0,128L40,117.3C80,107,160,85,240,90.7C320,96,400,128,480,154.7C560,181,640,203,720,192C800,181,880,139,960,106.7C1040,75,1120,53,1200,58.7C1280,64,1360,96,1400,112L1440,128L1440,320L1400,320C1360,320,1280,320,1200,320C1120,320,1040,320,960,320C880,320,800,320,720,320C640,320,560,320,480,320C400,320,320,320,240,320C160,320,80,320,40,320L0,320Z"></path>
    </svg>
  </div>
  <div class="content"></div>

---

Related Topics