title: How to make a curved edge hexagon by using CSS
body: <p>This is my CSS.</p>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>#hexagon-circle { 
      width: 100px; 
      height: 55px; 
      background: red; 
      position: relative;
      border-radius: 10px;} 
  #hexagon-circle:before { 
      content: ""; 
      position: absolute; 
      top: -25px; 
      left: 0; 
      width: 0; 
      height: 0; 
      border-left: 50px solid transparent; 
      border-right: 50px solid transparent; 
      border-bottom: 29px solid red;
      border-radius: 10px;} 
  #hexagon-circle:after { 
      content: ""; 
      position: absolute; 
      bottom: -25px; 
      left: 0; 
      width: 0; 
      height: 0; 
      border-left: 50px solid transparent; 
      border-right: 50px solid transparent; 
      border-top: 29px solid red;
      border-radius: 10px;}
  </code></pre>
  
  <p>The output is 4 edges of hexagon is curved, but top and the bottom is not. I want to make all edge of hexagon curved. How to make top and bottom edge to be curved? or How to make the top edge of triangle to be curved?</p>
  
  <p><strong><a href="http://jsfiddle.net/yR7zt/">http://jsfiddle.net/yR7zt/</a><a href="http://jsfiddle.net/yR7zt/">1</a></strong></p>