Guys how to make the border-image contrary turned down through CSS I’m trying to do this some time, it doesn't work. It should be as in the picture in the application below.

enter image description here

 .wave{ 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, aquamarine 13px); } .wave::after{ content: ""; position: absolute; left: 0; bottom: 0; right: 0; background-repeat: repeat; height: 15px; background-size: 40px 20px; background-image: radial-gradient(circle at 10px 15px, aquamarine 12px, transparent 13px); } 
 <div class="wave"></div>

    2 answers 2

    Something like this

     .wave{ height: 50px; position: relative; background-color: red; overflow: hidden; } .wave::before{ content: ""; position: absolute; left: 0; top: 0; right: 0; background-repeat: repeat; height: 10px; background-size: 20px 20px; background-image: radial-gradient(4px 5px at bottom, transparent 12px, aquamarine 13px); } .wave::after{ content: ""; position: absolute; left: -10px; top: 0; right: 0; background-repeat: repeat; height: 15px; background-size: 40px 20px; background-image: radial-gradient(circle at top, aquamarine 14px, transparent 12px); } 
     <div class="wave"></div>

      You can simply deploy and adjust:

       body { background: red } .wave { height: 50px; position: relative; background: aquamarine; } .wave::before { content: ""; position: absolute; left: 0; bottom: -15px; right: 0; background-repeat: repeat; height: 15px; background-size: 20px 20px; background-image: radial-gradient(circle at 10px 0px, transparent 12px, aquamarine 13px); transform: rotate(180deg) } .wave::after { content: ""; position: absolute; left: 0; bottom: -15px; right: 0; background-repeat: repeat; height: 15px; background-size: 40px 20px; background-image: radial-gradient(circle at 10px 15px, aquamarine 12px, transparent 13px); transform: rotate(180deg) } 
       <div class="wave"></div>