How to create rounded shape by CSS

Is it possible to create the same shape by CSS like this image? I can use the original image file in my HTML, but I want to use the same shape by CSS. I don't understand how doing this. I have used border with :before, :after property, but could not give the same shape. What can I do now?

Example enter image description here

Solution

Visit this link for all possible shapes CSS Shapes

for round shape

 #circle {
    width: 100px;
    height: 100px;
    background: red;
    -moz-border-radius: 50px;
    -webkit-border-radius: 50px;
    border-radius: 50px;
}

/* Cleaner, but slightly less support: use "50%" as value */

for html 5 cnavas animated waves

<html>
  <head>
    <style>
      body {
        margin: 0;
      }

      h1 {
        position: absolute;
        bottom: 10px;
        left: 10px;
        margin: 0;
        color: #FFF;
        z-index: 10;
        font-family: Helvetica, sans-serif;
      }

      #canvas {
        background-color:#FAFAFA;
        position: absolute;
        top: 0; left: 0;
        width: 100%; height: 100%;
      }
    </style>

  </head>

  <body>
    <h1>Waves</h1>

    <canvas id="canvas" width="400" height="400"></canvas>

    <script type='text/javascript'>
      var canvas = document.getElementById('canvas');
      var ctx = canvas.getContext('2d');

      canvas.width = window.innerWidth;
      canvas.height = window.innerHeight;

      var waves = ["rgba(157, 187, 210, 0.3)",
                   "rgba(171, 216, 201, 0.3)",
                   "rgba(135, 199, 215, 0.3)",
                   "rgba(223, 233, 235, 0.3)"]

      var i = 0;

      function draw() {
        canvas.width = canvas.width;

        for(var j = waves.length - 1; j >= 0; j--) {
          var offset = i + j * Math.PI * 12;
          ctx.fillStyle = (waves[j]);

          var randomLeft            = (Math.sin(offset/100)  + 1)       / 2 * 200;
          var randomRight           = (Math.sin((offset/100) + 10) + 1) / 2 * 200;
          var randomLeftConstraint  = (Math.sin((offset/60)  + 2)  + 1) / 2 * 200;
          var randomRightConstraint = (Math.sin((offset/60)  + 1)  + 1) / 2 * 200;

          ctx.beginPath();
          ctx.moveTo(0, randomLeft + 100);

          // ctx.lineTo(canvas.width, randomRight + 100);
          ctx.bezierCurveTo(canvas.width / 3, randomLeftConstraint, canvas.width / 3 * 2, randomRightConstraint, canvas.width, randomRight + 100);
          ctx.lineTo(canvas.width , canvas.height);
          ctx.lineTo(0, canvas.height);
          ctx.lineTo(0, randomLeft + 100);

          ctx.closePath();
          ctx.fill();
        }

        i = i + 3;
      }
      setInterval("draw()", 20);
    </script>
  </body>
</html>