title: create semicircle around button
body: <p>I have two links in my site positioned center top and bottom. They are close to the top/bottom edge and I want them to have a half-circle border but not sure how to accomplish that.</p>
  
  <p>css</p>
  
  <pre><code>#arrowdown, #arrowup {
    display: block;
    position: fixed;
    width: 40px; height: 40px;
    color: #fff;
    left: 0; right: 0;
    margin: 0 auto;
    z-index: 20;
    -webkit-backface-visibility: hidden;  
  }
  
  #arrowdown {  bottom: 10px; }
  #arrowup { top: 10px; }
  </code></pre>
  
  <p>html</p>
  
  <pre><code>&lt;button id="arrowup"&gt;
      &lt;i class="fa fa-chevron-up fa-2x"&gt;&lt;/i&gt;
  &lt;/button&gt;
  
  &lt;button id="arrowdown"&gt;
      &lt;i class="fa fa-chevron-down fa-2x"&gt;&lt;/i&gt;
  &lt;/button&gt;
  </code></pre>