Create wavy borders in CSS for top and bottom borders

by

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

More Related Contents:

  1. HTML5 / CSS3 Circle with Partial Border
  2. Slanted diagonal line in html or css?
  3. Border with a transparent centred arrow
  4. I want to get this CSS shape and have a background puicture inside it
  5. Element will not stay centered, especially when re-sizing screen
  6. Responsive grid of hexagons
  7. How to use CSS to surround a number with a circle?
  8. How to increase space between dotted border dots
  9. html/css hexagon with image inside
  10. Easier way to create circle div than using an image?
  11. Borders disappear in Chrome when I zoom in
  12. Create a slanted edge to a div [duplicate]
  13. Draw Circle using css alone [duplicate]
  14. Giving a border to an HTML table row,
  15. Creating a ‘New’ spiky label with 24 or above point burst
  16. Half circle with CSS (border, outline only)
  17. How to add border to a container with transparent gaps in between
  18. How can I make a 45 degree responsive ribbon with folded corner?
  19. Add outward curving border to elements like this: ◝◟___◞◜
  20. How to make a border overlay child div?
  21. How to create a curved speech bubble?
  22. How can I apply a border only inside a table?
  23. How can I make a div with irregular shapes with css3 and html5?
  24. How can I create a wavy shape CSS?
  25. div with triangle at the bottom with background image
  26. Responsive CSS Circles
  27. CSS Zigzag Border with a Textured Background
  28. How do I create a teardrop in HTML?
  29. How to create a heart shape using CSS?
  30. Make plus symbol in CSS

Leave a Comment