title: CSS semi-circle effect
body: <p>I am trying to create a unique shape using solely CSS.</p>
  
  <p>Here is what I have so far: <a href="http://jsfiddle.net/u6vu96u8/" rel="nofollow">http://jsfiddle.net/u6vu96u8/</a></p>
  
  <p>However, there is too much <code>flat</code> at the base of the semi-circle. 
  Is it possible, I can just get the curves to meet exactly in the middle without the flat line?</p>
  
  <p><strong>Code:</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>button {
    font-size: 1em;
    background: #ffffff;
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border: 1px solid #1588cb;
    color: #1588cb;
    font-weight: 400;
    height: 60px;
    width: 300px;
    position: relative;
    margin: 25px 0 50px 0;
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    -o-box-sizing: content-box;
    box-sizing: content-box;
  }
  .full-circle {
    border: 1px solid #1588cb;
    height: 35px;
    width: 45px;
    -moz-border-radius: 30px;
    -webkit-border-radius: 30px;
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    -o-box-sizing: content-box;
    box-sizing: content-box;
    border-radius: 0 0 45px 45px;
    border-top: none;
    height: 15px;
    background: #ffffff;
    position: absolute;
    left: 50%;
    margin-left: -17px;
    bottom: -16px;
    line-height: 0;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;button&gt;News
    &lt;span class="full-circle"&gt;+&lt;/span&gt;
  &lt;/button&gt;</code></pre>
  </div>
  </div>
  </p>