In this blog, we will see how to create wave borders and wavy shapes in HTML CSS? We will see and follow both the examples below, which will show us how to create wave borders and wavy shapes in HTML CSS.
How to Create Wave Border
To create a wave border, we will use After Before which can change the border style of the background in our website, we call it Wave Border.
Example:-
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!----myprograming.com----->
<title>Wave Border in HTML CSS</title>
</head>
<style type="text/css">
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #fff;
}
.wave{
position: relative;
width: 500px;
height: 300px;
background: blue;
}
.wave::before{
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 30px;
background-size: 40px;
background-image:
radial-gradient(circle at 20px -10px , #fff 24px, transparent 26px);
}
.wave::after{
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 30px;
background-size: 40px;
background-image:
radial-gradient(circle at 20px -10px , transparent 24px, #fff 26px);
}
.wave
h1{
text-align: center;
margin-top: 100px;
color: #fff;
}
</style>
<body>
<div class="wave">
<h1>This is wave Border Example</h1>
</div>
</body>
</html>Output:-
How to Create Wavy Shape
We will use SVG to create the Wavy Shape which makes the background in our website more attractive. Sometimes Wavy Shape is used to make the background shape in the website.
Example:-
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title> Wavy Divider (with SVG element as divider inside the HTML)
</title>
<style type="text/css">
.class1 {
background: red;
}
.class2{
background: yellow;
}
svg {
width: 100%;
height: 100%;
}
svg path {
fill: red;
}
svg rect {
fill:yellow;
}
.container {
--divider-height:4rem;
position: relative;
top: calc( var(--divider-height)/2 * -1 );
height: var(--divider-height);
width: 100%;
/* alternatively, could get rid of the rect, and move the svg container further down */
float: left;
z-index: 1;
/* outline: 1px solid red; */
}
/** Cosmetics **/
* {
margin: 0;
}
.class1,.class2 {
padding: 50px;
}
div {
font-family: monospace;
font-size: 1.2rem;
line-height: 1.2;
}
.class1 {
color: white;
}
</style>
</head>
<body>
<div class="class1">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
</p>
</div>
<div class="container">
<svg viewBox="0 70 500 60" preserveAspectRatio="none">
<rect x="0" y="0" width="500" height="500" style="stroke: none;" />
<path d="M0,100 C150,200 350,0 500,100 L500,00 L0,0 Z" style="stroke: none;"></path>
</svg>
</div>
<div class="class2">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, </p>
</div>
</body>
</html>Output:-
