Make hexagon shape with border, rounded corners and transparent background
<p>I want to make a hexagonal shape with border, rounded corners and transparent background in CSS3 like in this image:</p>

<p><a href="https://i.stack.imgur.com/ZO3aS.png" rel="noreferrer"><img src="https://i.stack.imgur.com/ZO3aS.png" alt="rounded hexagon with border"></a></p>

<p>I can't make this with rounded corners and border.</p>

<p>My code is here: </p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>#hexagon-circle {
  position: relative;
  margin: 1em auto;
  width: 10em;
  height: 17.32em;
  border-radius: 1em/.5em;
  background: red;
  transition: opacity .5s;
  cursor: pointer;
}
#hexagon-circle:before {
  position: absolute;
  width: inherit;
  height: inherit;
  border-radius: inherit;
  background: inherit;
  content: '';
  -webkit-transform: rotate(60deg);  /* Chrome, Opera 15+, Safari 3.1+ */
  -ms-transform: rotate(60deg);  /* IE 9 */
  transform: rotate(60deg); /* Firefox 16+, IE 10+, Opera */
}

#hexagon-circle:after {
  position: absolute;
  width: inherit;
  height: inherit;
  border-radius: inherit;
  background: inherit;
  content: '';
  -webkit-transform: rotate(-60deg);  /* Chrome, Opera 15+, Safari 3.1+ */
  -ms-transform: rotate(-60deg);  /* IE 9 */
  transform: rotate(-60deg); /* Firefox 16+, IE 10+, Opera */
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="hexagon-circle"&gt;&lt;/div&gt;</code></pre>
</div>
</div>
</p>