title: Reverse border-radius
body: <p>I want the opposite border radius, so that the smiley will be sad.</p>
  
  <pre><code>div.smile {
      width: 200px;
      height: 70px;
      border: 10px solid #222;
      border-top: 0;
      background: rgba(0,0,0,0);
      -moz-border-radius: 0 0 120px 120px / 0 0 90px 90px;
      -webkit-border-radius: 0 0 120px 120px 0 0 90px 90px;
      border-radius: 0 0 120px 120px / 0 0 90px 90px;
      position: absolute;
      bottom: 50px;
      left: 38px;
      box-shadow: 0 2px 0 rgba(255,255,255, 0.8);
      -webkit-box-shadow: 0 2px 0 rgba(255,255,255, 0.8);
      -moz-box-shadow: 0 2px 0 rgba(255,255,255, 0.8);
      }
  </code></pre>
  
  <p>Here is the fiddle link:</p>
  
  <p><a href="http://jsfiddle.net/mayoung/2qBLF/" rel="nofollow">http://jsfiddle.net/mayoung/2qBLF/</a></p>