Create wavy borders in CSS for top and bottom borders

Question

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;
  position: relative;  
}
.wave::before, .wave::after{
  border-bottom: 5px solid rgba(237, 30, 30, 1);
}
.wave::before{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 12px;
  background-size: 20px 40px;
  background-image:
    radial-gradient(circle at 10px -15px, transparent 20px, rgba(237, 30, 30, 1) 21px);
}
.wave::after{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 18px;
  background-size: 40px 40px;
  background-image:
    radial-gradient(circle at 10px 26px, rgba(237, 30, 30, 1) 20px, transparent 21px);
}


.wavebottom{
  background: rgba(237, 30, 30, 1);
  height: 25px;
  position: relative;  
}
.wavebottom::before, .wave::after{
  border-bottom: 5px solid rgba(237, 30, 30, 1);
}
.wave::before{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 12px;
  background-size: 20px 40px;
  background-image:
    radial-gradient(circle at 10px -15px, transparent 20px, white 21px);
}
.wavebottom::after{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 18px;
  background-size: 40px 40px;
  background-image:
    radial-gradient(circle at 10px 26px, white 20px, transparent 21px);
}

Where I have the code in 3 divs.. first div has the wave class

second div has the background color and the content

and the third div has the wavebottom class

but I'm getting the results of the waves looking like that

I'm working on a page with the width of 1920px, I'm not sure how can I make this look the same like the first image

m4n0 · Accepted Answer · 2019-06-01 16:25:27Z

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>

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

Temani Afif · Accepted Answer · 2022-11-14 15:46:08Z

3

I made an online generator for wavy shapes from where you can easily get the code: https://css-generators.com/wavy-shapes/

Select your configuration and get the code. It relies on CSS mask so you can have any background coloration you want:

.box {
  --mask:
    radial-gradient(31.50px at 50% 44.40px,#000 99%,#0000 101%) calc(50% - 48px) 0/96px 51% repeat-x,
    radial-gradient(31.50px at 50% -20.4px,#0000 99%,#000 101%) 50% 24px/96px calc(51% - 24px) repeat-x,
    radial-gradient(31.50px at 50% calc(100% - 44.40px),#000 99%,#0000 101%) calc(50% - 48px) 100%/96px 51% repeat-x,
    radial-gradient(31.50px at 50% calc(100% + 20.40px),#0000 99%,#000 101%) 50% calc(100% - 24px)/96px calc(51% - 24px) repeat-x;
  -webkit-mask: var(--mask);
          mask: var(--mask);
   height: 300px;
   background: linear-gradient(45deg,red,blue);
}

<div class="box"></div>

answered Nov 14, 2022 at 15:46

Temani Afif

280k30 gold badges378 silver badges503 bronze badges

3 Comments

Julius Goddard Over a year ago

Excellent tool...

Mr42 Over a year ago

Thanks! Is there a way to add the wavy border to all four sides?

Temani Afif Over a year ago

@Mr42 css-shape.com/wavy-box

Collectives™ on Stack Overflow

Create wavy borders in CSS for top and bottom borders

2 Answers 2

Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related