CSS: Creating circles and wave effects with CSS - nice

Wednesday, January 21, 2015
by Sean McAlinden

Whilst messing about with CSS the other day to try and make a curved footer for my blog, I was amazed to find you can easily create shapes such as circles and wave effects with just CSS.

I should add the caveat that I am not a front end developer, I spend my life in identity solutions and RESTful Web APIs, with this in mind you should consider that there might be even better ways to achieve the same effect.

So, here goes:

Creating a circle

#circle {
  display: block;
  border-radius: 100% 100%;
  width: 150px;
  height: 150px;
  background-color: #3e9273;

Creating a wave

This is how I created the wave effect for my footer, I essentially created a warped circle and positioned it near the top of the footer div.

This gave it a curved/wave like top which was nicely responsive.

#wave {
  display: block;
  border-radius: 100% 50%;
  width: 300px;
  height: 50px;
  background-color: #3e9273;

And there it is, found a new toy in css where I could over engineer my blogs footer with ease :).