Creating a Wave Shape with Border in CSS3

When attempting to design a wave shape with CSS3 using Shapes, the desired result may not be achievable due to the limitations of border and background color settings. To overcome this, consider using SVG instead of a div for the wave shape.

Implementation:

Begin by creating a container div with a bottom border. Within the container, place the content and the SVG for the wave shape. Float the SVG to the right.

SVG Design:

Craft the wave shape using paths to define the shape and fill it with white. Next, create another path, slightly offset, to define the border using the stroke property and setting the fill to transparent.

Final Execution:

The SVG will overlap the container slightly, creating the illusion of a bordered wave shape. Adjust the dimensions and position of the SVG as needed to match the desired design.

Example Code:

body {
  background: #007FC1;
}
.container {
  border-bottom: 4px solid #B4CAD8;
}
.container {
  background-color: #fff;
}
.container > .text {
  padding: 0.5em;
}
.panel {
  position: relative;
  float: right;
  margin-top: -4px;
}

  

    
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates nam fuga eligendi ipsum sed ducimus quia adipisci unde atque enim quasi quidem perspiciatis totam soluta tempora hic voluptatem optio perferendis.