Streaming live at 10am (PST)

Wave shape for boundary

I have looked all over for an answer to this, but how do you make the boundary of a section/div a curve/wave shape? I have the following boundary shape in my Figma design right now:

If it helps, the CSS for the wave shape is:

position: absolute;

width: 6302px;

height: 5483.65px;

left: calc(50% - 6302px/2 + 1266px);

top: 59px;

background: #FFFFFF;

box-shadow: -4px -4px 30px rgba(0, 0, 0, 0.1), 4px 4px 30px rgba(0, 0, 0, 0.1);

Thanks!

Hi Alexander :slight_smile: Welcome to the forum :webflow_heart:

If your shape does not have any functional necessity, then it does not have to be a boundary, but a simple background. In this case you can upload an SVG file and use it as a background for any div positioned correctly.
However, if that shape must have a functionality (actually be the boundary with overflow:hidden) then it can’t be done without custom code.