How to create block with curved sides as in the picture?

Problem

How to create block with curved sides as in the picture?
http://i.stack.imgur.com/jCyWw.png

I created a block with shadows of both sides. But how create the effect of curved sides I don't know.

.comment{
  height:260px;
  width:280px;      
  margin: 10px auto;      
  padding: 0 40px;
  box-shadow:  -23px 0px 20px -23px rgba(0, 0, 0, .5),
  23px 0 20px -23px rgba(0, 0, 0, .5);   
 }
Problem courtesy of: Roman

Solution

You should add border-radius

.comment{
  height:260px;
  width:280px;
  margin: 10px auto;
  padding: 0 40px;
  box-shadow:
   -23px 0px 20px -23px rgba(0, 0, 0, .5),
   23px 0 20px -23px rgba(0, 0, 0, .5);
  border-radius: 5% /50%;
}

An example here :

http://jsfiddle.net/Nac5V/7/

Solution courtesy of: Vangel Tzo

Discussion

have a look at this: DEMO

you'll have to add border-radius to bottom-left and bottom-right corners

and will have to remove from top-left and top-right corner as :

.comment{
height:260px;
width:280px;
margin: 10px auto;
padding: 40px;
margin-bottom:5px;
padding-bottom:5px;
box-shadow:
   -23px 0px 20px -23px rgba(0, 0, 0, .5),
   23px 0 20px -23px rgba(0, 0, 0, .5);
border-radius:15%/70%;
border-top-left-radius:0px;
border-top-right-radius:0px;
}

also do have a look at margin-bottom and padding-bottom.

hope it'll help you.. cheers !

Discussion courtesy of: Vedant Terkar

This recipe can be found in it's original form on Stack Over Flow.